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
Aurelian Spodarec
10,801 PointsAnimation fade in when you see it - how to do it
Hello There TeamTreehouse Community!
In this post I wanted to ask about a JavaScript or CSS (probably JavaScript) piece of code, or about theory or something, on how can I achieve an effect like on this page right here.
If you see, and scroll most likely :D the fade in with CSS, is aplied only when shown on the screen for the user.
When I did fade in keyframes, the whole site loads with it, but I want it to load when the user scrolls down.
How do I do it? Any method, function that can help?
Eh eh.
JavaScript, wait to load this CSS keyframes when the user screen is not on them, if the user screen goes beyond 534px, as thats where the next section starts, after 1sec od delay , user the keyframe.
Eh eh, thank you.
Your friend PHP is much easier than you. Old and wise.
1 Answer
Kevin Korte
28,149 PointsProbably a combination of some scrolling javascript and lazy loading images, although I didn't look at the page source code.
Look for plugins that offer "lazy loading" and also scrolling plugins like scrollr or scrollmagic.
Aurelian Spodarec
10,801 PointsAurelian Spodarec
10,801 PointsYes, lazy loading. Lol Maybe there is just a slittle part of what is 'easy' to do xD but with understanding I will understand it for sure.
Could I send you email or write to you personally Kevin? xd