Grow your CSS skills. Land your dream job.

How to trigger several animation after user scroll to N points – jQuery waypoints

  • # May 2, 2013 at 11:03 am

    I need your help!

    Basic idea: I want when user scroll to one point (in the middle of the pages – let say it’s 500px from top) then we have some animation, of course I won’t ask how to do all the animation stuff, but I will need you to give me the basic idea about the callback

    Callbacks that I mean: after 1st animation, we get 2nd animation, then 3rd animation. How I approach this?

    SCENARIO:

    Let say we have 4 boxes, and they have color red, blue, orange and pink.
    After user scrolled to 500px from top – I want first red box fadein
    2 seconds from that, I want the red box fadeOut, and blue box will fadein.
    in my original idea, I will need them to rotate or some other animation – if you could do this too it will be great , please ignore this point if you think I’m asking too much
    TOOLS:

    jQuery waypoints http://imakewebthings.com/jquery-waypoints/
    maybe jQuery transit ? http://ricostacruz.com/jquery.transit/

    Please, let me know if your code is good for the best practices
    Thanks!

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".