CODEWITHSUNDEEP
javascripthtmlcss
Chapsterj
Chapsterj

Reputation: 6635

scrolling effect

I'm trying to do something like this.

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

What I can't figure out is how to make the animation happen based on the scroll when the scroll hits a specific position. I have similar blocks of content that I only want to animate parts of it based on the scroll and when the block is within the browsers view area when scrolling.

I understand using the scroll event to get the scrollTop position I'm more concerned with how everything else would work.

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

Anyone can help explain some of this.

Thanks

Upvotes: 4

Views: 243

Answers (1)

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94409

Just like what MiniGod said in the comment, look in to the source code (animate.js), and you can see that they have recorded all the "scenes" and all other things like 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}
        ]
}

Upvotes: 1

Related Questions