CSS3 Animation on Scrolldown

HTML & CSS
1

I have seen a few websites which have used CSS3 animations on their pages. When you scroll down a small animation happens (either a small shake or grow effect). This animation then stops so you can read the page.

I have found this script, http://lab.hakim.se/scroll-effects/, which looks to what I need.

I tried to adjust this but I have not had much luck. I am not entirely sure if this would work without the scroll box and only the scroll on the browser.

If anybody had any experience with this I would be very interested to know.

2

I have found this, http://www.justinaguilar.com/animations/index.html#how

Looks quite promising!

3

Hi Sega,

Did you find something that worked for you?

If not we’d need to know a little more detail about the effect you want and perhaps an example of the code that it has to work on.:slight_smile:

4

Yes, this http://www.justinaguilar.com/animations/index.html#how really did the job. Thanks for asking. In includes a range of effects that you can combine there.

5

Ok Great.:slight_smile: I already have that page book marked as its very useful.

6

You got any more pages marked which could help me. I am interested mostly in CSS3 animations and transitions.

7

Here’s a few interesting snippets:

http://demosthenes.info/blog/css/transforms
http://lea.verou.me/2012/12/animations-with-one-keyframe/#more-1975
http://thewebrocks.com/demos/3D-css-tester/