html - How to trigger animation after user scroll to N points - jQuery waypoints with multiple animation .animate() -
i need help!
basic idea: want when user scroll 1 point (in middle of pages - let it's 500px top) have animation, of course won't ask how animation stuff, need give me basic idea callback
callbacks mean: after 1st animation, 2nd animation, 3rd animation. how approach this?
scenario:
- let have 4 boxes, , have color red, blue, orange , pink.
- after user scrolled 500px top - want first red box fadein
- 2 seconds that, want red box fadeout, , blue box fadein.
- in original idea, need them rotate or other animation - if great :) , please ignore point if think i'm asking much
tools:
- jquery waypoints http://imakewebthings.com/jquery-waypoints/
maybe jquery transit ? http://ricostacruz.com/jquery.transit/
<!doctype html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body> <div id="container"> <div class="red box"></div> <div class="blue box"></div> <div class="orange box"></div> <div class="pink box"></div> </div> </body> </html>
+1 right solutions, appreciate solutions, vote if it's works :)
thanks!
i using jquery waypoints.
this triggered when element in question visible, meaning it's bottom above bottom of viewport:
$('.red_box').waypoint(function(direction){ $('.red_box').fadein(); window.settimeout(animateblue, 2000); },{offset: 'bottom-in-view'}); the animation begins , during animation timer kicks off call specified function after 2 seconds.
function animateblue(){ $('.red_box').fadeout(function(){ $('.blue_box').fadein(); }); window.settimeout(animatepink, 2000); } function animatepink(){ $('.blue_box').fadeout(function(){ $('.pink_box').fadein(); }); } the red box fades out , when animation complete blue box fades in.
for further animations can either use more waypoints or use call after time. on api of fade-functions see
http://api.jquery.com/category/effects/fading/
(you know that)
of course can tweak timings , when animations kick off.
not sure whether wanted 2 seconds start after animation completed or not. , not sure if red , blue should fade out , in simultaneously.
for rotation :
http://javascriptisawesome.blogspot.de/2011/09/jquery-css-rotate-and-animate-rotation.html
Comments
Post a Comment