I have a page where I have few images. I would like to know how to animate images as a user scrolls down the page and the images become visible? Take a look at this page: http://www.elegantthemes.com/demo/?theme=Divi
As you scroll down, each image animates – (fall down, slide in) + Fade. What is this effect called and how it can be achieved? Can it be done with pure CSS3 or JS is also required?
Thanks.
2
Answers
Basically Javascript is needed here in order to follow the user scrolling down, and animating when he gets to specific position.
I highly recommending using GreenSock animations:
http://www.greensock.com/get-started-js/
You can read more about it here:
http://codeaway.info/parallax-and-scrolling-control-of-tweens-with-greensock-ap-js/
Good luck.
I found Skrollr.js to be the best tool for on scroll animations.
Check our these two tutorials to get you started with Skrollr:
[EDIT] Or you could use scrollReveal.js, it does what it says – reveals elements as you scroll down the page.