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 bee visible? Take a look at this page: /?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.

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 bee visible? Take a look at this page: http://www.elegantthemes./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.

• javascript
• jquery
• html
• css
• css-animations

• css transitions is what u need – deW1 Commented Jan 30, 2014 at 11:50
• 1 @monners: What is up with people here on stackoverflow? I am just asking for ideas. If you don't have anything to contribute, please refrain from menting. No one asked you to do work for me. If you have a such a problem, go troll somewhere else. – Blueboye Commented Jan 30, 2014 at 11:57

2 Answers 2

I found Skrollr.js to be the best tool for on scroll animations.

Check our these two tutorials to get you started with Skrollr:

• Simple parallax scrolling tutorial
• How to create a parallax scrolling website

[EDIT] Or you could use scrollReveal.js, it does what it says - reveals elements as you scroll down the page.

Basically Javascript is needed here in order to follow the user scrolling down, and animating when he gets to specific position.

I highly remending using GreenSock animations: http://www.greensock./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.