The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Scroll down item fall script?

View previous topic View next topic Go down

Solved Scroll down item fall script?

Post by Guest on December 12th 2014, 7:55 pm

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!  Mr. Green


Last edited by Fédra on December 13th 2014, 9:01 am; edited 1 time in total

Guest
Guest


Back to top Go down

Solved Re: Scroll down item fall script?

Post by Ange Tuteur on December 13th 2014, 12:22 am

Hi Fédra,

Something like this ?

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

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.

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Scroll down item fall script?

Post by FrOsTyXi on December 13th 2014, 1:36 am

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

FrOsTyXi
Forumember

Male Posts : 460
Reputation : 12
Language : english

http://team-psn.forum-board.net/

Back to top Go down

Solved Re: Scroll down item fall script?

Post by Tonight on December 13th 2014, 1:55 am

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

Tonight
Forumember

Male Posts : 240
Reputation : 63
Language : Estonian, English, Russian
Location : Estonia

Back to top Go down

Solved Re: Scroll down item fall script?

Post by Ange Tuteur on December 13th 2014, 2:53 am

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);
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Scroll down item fall script?

Post by Guest on December 13th 2014, 8:37 am

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

Thank you, thank you!  ùù

Guest
Guest


Back to top Go down

Solved Re: Scroll down item fall script?

Post by Ange Tuteur on December 13th 2014, 8:21 pm

You're welcome santa

Topic archived

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

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum