I have seen a cool script on a site and would like to ask if someone could make something similar?
Here is the site: http://www.origo.hu/index.html
If you scroll down on the left side a christmas tree fades in and as you scroll down and down ornaments fall on it and gifts appear around it. =o

Any help is appreciated! 

Hi Fédra,

Something like this ?

Don't mind the flat graphics, I needed something to work with while I was putting it together.  

Go to Administration Panel > Modules > JavaScript codes management > Create a new script

Title : Your choice
Placement : Your choice

Code:

$(function() {
  var position = 'right', // left or right ; position of the the decoration
      y_thn = window.pageYOffset,
      
    // create a bunch of objects
    // you can change the images below if you like
     tree = new Dynamic('http://i39.servimg.com/u/f39/18/21/60/73/tree10.png', 0, 200),
   lights = new Dynamic('http://i39.servimg.com/u/f39/18/21/60/73/lights10.png', 0, 200),
    deco1 = new Dynamic('http://i39.servimg.com/u/f39/18/21/60/73/l110.png', 45, 0),
    deco2 = new Dynamic('http://i39.servimg.com/u/f39/18/21/60/73/l210.png', 60, 30),
    deco3 = new Dynamic('http://i39.servimg.com/u/f39/18/21/60/73/l310.png', 30, 100),
    deco4 = new Dynamic('http://i39.servimg.com/u/f39/18/21/60/73/l410.png', 60, 70),
    deco5 = new Dynamic('http://i39.servimg.com/u/f39/18/21/60/73/l510.png', 75, 125),
    deco6 = new Dynamic('http://i39.servimg.com/u/f39/18/21/60/73/l610.png', 20, 155),
    deco7 = new Dynamic('http://i39.servimg.com/u/f39/18/21/60/73/l710.png', 85, 145),
    deco8 = new Dynamic('http://i39.servimg.com/u/f39/18/21/60/73/l810.png', 55, 190);
      
  function Dynamic(img, x,y) {
    // create the image, then apply its source and style
    this.el = document.createElement('IMG');
    this.el.src = img, this.el.setAttribute('style','position:fixed;'+position+':'+x+'px;top:'+y+'px;opacity:0;');
    
    /* -- START fade -- */
    // n refers to the amount of opacity you want to add or subtract
    this.fadeIn = function(n) {
      var opa = opaN(this.el);
      if (opa >= 1) return this.el.style.opacity = 1;
      this.el.style.opacity = opa + n
    };
    this.fadeOut = function(n) {
      var opa = opaN(this.el);
      if (opa <= 0) return this.el.style.opacity = 0;
      this.el.style.opacity = opa - n
    };
    /* -- END fade -- */
    
    /* -- START movement_Y -- */
    // s refers to the value you want to stop at
    this.up = function(s) {
      var top = topN(this.el);
      if (top <= s) return this.el.style.top = s + 'px';
      this.el.style.top = top - 5 + 'px'
    };
    this.down = function(s) {
      var top = topN(this.el);
      if (top >= s) return this.el.style.top = s + 'px';
      this.el.style.top = top + 5 + 'px'
    };
    /* -- END movement_Y -- */
    
    document.body.appendChild(this.el); // add the image to the document body
  };
  
  window.onscroll = function() {
    var y_now = window.pageYOffset; // get y on scroll for comparison to y_thn
    
    /* -- START scroll down -- */
    if (y_now > y_thn) {
      // tree and lights
      tree.fadeIn(0.05);
      lights.fadeIn(0.04);
      
      // decorations
      deco1.fadeIn(0.04), deco1.down(225);
      deco2.fadeIn(0.04), deco2.down(255);
      deco3.fadeIn(0.04), deco3.down(325);
      deco4.fadeIn(0.04), deco4.down(295);
      deco5.fadeIn(0.04), deco5.down(350);
      deco6.fadeIn(0.04), deco6.down(390);
      deco7.fadeIn(0.04), deco7.down(380);
      deco8.fadeIn(0.04), deco8.down(425);
      
      y_thn = y_now;
    }
    /* -- END scroll down -- */
    
    /* -- START scroll up -- */
    if (y_now < y_thn) {
      // tree and lights
      tree.fadeOut(0.05);
      lights.fadeOut(0.04);
      
      // decorations
      deco1.fadeOut(0.04), deco1.up(0);
      deco2.fadeOut(0.04), deco2.up(30);
      deco3.fadeOut(0.04), deco3.up(100);
      deco4.fadeOut(0.04), deco4.up(70);
      deco5.fadeOut(0.04), deco5.up(125);
      deco6.fadeOut(0.04), deco6.up(155);
      deco7.fadeOut(0.04), deco7.up(145);
      deco8.fadeOut(0.04), deco8.up(190);
      
      y_thn = y_now;
    }
    /* -- END scroll up -- */
  };
  
  function opaN(el) { return Number(el.style.opacity) }
  function topN(el) { return Number(el.style.top.replace(/(px|%)/,'')) }
});

You can edit a few things in the script.

1. ) If you see any image, you can replace it with your own if you like. Just check to the left for its name, so you know what it is.

2. ) position : This just changes the position of the decoration from right to left and vice versa.

wow this is awesome i like it a lot! Well done!

Wow, this is awesome. How do we get these deco8.down(425) etc numbers?

To create a new dynamic element declare a variable in the script like :

Code:

var myDeco = new Dynamic('example.gif', 25, 0);

The numbers after the image are X and Y coordinates. ( they go by pixels )

I have some comments above the methods in the script already, but. For fadeIn(n) and fadeOut(n), n refers to the amount of opacity you want to add or subtract. For example :

Code:

var fadeInt = window.setInterval(function() {
  if (Number(myDeco.el.style.opacity) >= 1) return window.clearInterval(fadeInt);
  myDeco.fadeIn(0.01);
},15);

For the up(s) and down(s) methods, s refers to the coordinate you want to stop at. For example :

Literally myDeco will go up to top:0px; and go no further. Down is the same, it will go down to top:255px; and wont go past that value.

Code:

window.onscroll = function() {
  myDeco.down(255);
}

Woah, thank you sooo much!   It's perfect!!
From my side it's completed, I don't know if the others still have any questions....

Thank you, thank you! 

You're welcome

Topic archived

If there are any questions about the decoration you can create a new topic.