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

JavaScript

Posted by Abe Layee
Abe Layee
8,378 Points

Activated scroll animation

Good day all. How are we all doing today? I have a question. How do I achieve activated scroll animation. I want my contents to fade in as you scroll down the page. I am currently looking for an article on how to this. I want to know what I need to achieve this task. I understand javaScript code pretty well. Thank you again.

Rob Ernest
Rob Ernest
1,626 Points

I actually did this on my website, pretty cool effect. Assuming you're using jQuery, use the following code.

$window.on('scroll', function() {
    if ($('thisElement').offset().top < $window.scrollTop() + 150 ) {
        //The animation code
    }
});

When the scroll bar reaches "thisElement" the animation will activate. You can play around with the number I have in there to help fine tune the activation point

2 Answers

Colin Marshall
Colin Marshall
32,861 Points
Colin Marshall
Colin Marshall
32,861 Points

Here is a Stack Exchange post that goes over what you are trying to accomplish: Fade In on Scroll Down, Fade Out on Scroll Up

JSFiddle demo

Abe Layee
Abe Layee
8,378 Points
Abe Layee
Abe Layee
8,378 Points

Alright, thank you guys. I appreciate it.