Scroll effect

Question

I am trying to do something like this.

http://www.mini.jp/event_campaign/big-point/

I can't figure out how to make scroll-based animations when the scroll gets to a specific position. I have similar blocks of content that I only want to animate parts of it based on scrolling and when the block is in the browsers viewing area when scrolling.

I understand the use of the scroll event to get the scrollTop position. I'm more worried about how things will work.

$(window).bind('scroll',function(e){ var scrolledY = $(window).scrollTop(); }); 

Anyone can help explain some of this.

thanks

Answer 1

Like the MiniGod said in the commentary, look at the source code ( animate.js ) and you can see that they recorded all the “scenes” and all other things, such as alpha and pos for everything.

 // scene 1 { scene:"#scene1", name:".car", runStatus:[ {p:10,pos:true,x:275,y:240,alpha:true,opacity:1,scale:true,orgSize:[475,270],scaleSize:1}, {p:180,pos:true,x:275,y:200,alpha:true,opacity:1,scale:true,orgSize:[475,270],scaleSize:1}, {p:270,pos:true,x:275,y:140,alpha:true,opacity:1,scale:true,orgSize:[475,270],scaleSize:1}, {p:500,pos:true,x:275,y:-300,alpha:true,opacity:0,scale:true,orgSize:[475,270],scaleSize:1} ] }