skip to Main Content

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


  1. 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.

    Login or Signup to reply.
  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:

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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search