Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Josue Sandoval
Josue Sandoval
946 Points

Can someone show me how to do this?

I have been trying to write some code to accomplish this but I am not getting anywhere. This is what I am trying to do:

I want an image to fade in from left to right from 0% transparency all the way to 100% transparency.

I want this to happen only when you reach a certain point while scrolling down on a website. For example you are scrolling down the website and you see the image fade from left to right.

I did find this which has the animation effects: http://daneden.me/animate/

I just cant find a way to trigger them at a certain point on a website while scrolling down. It is a neat effect I have seen lately and I am not able to replicate it.

1 Answer

J A
J A
6,092 Points
J A
J A
6,092 Points

This script lets you trigger events using waypoints at certain points on the page.

http://imakewebthings.com/jquery-waypoints/