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
Pauline Orr
15,321 PointsHow to trigger animation on scroll up and down?
I am building my wedding website. I'm having flowers at the top. Once you scroll, I want those flowers to back away to give more room to the copy. I also want the flowers to return to their first place when you scroll back to the top. How would I code this?
Here's the inspiration: http://cafefrida.ca
2 Answers
Steven Parker
243,318 PointsNice looking effect!
It seems to be implemented by placing four partially-transparent images on the page with position: fixed, and using CSS transform (translate) to move them away when when their outer container acquires a special class. A CSS transform of 1 second provides smooth motion.
I would guess the class change is triggered by a JavaScript onscroll handler when the distance reaches a certain number of pixels, and changed back when the distance goes below the threshold.
Are you familiar with browser DevTools? They can be really handy for peeking under the hood on existing sites. You might be interested in the Debugging a Web App With Chrome Dev Tools workshop or the Website Optimization course.
Pauline Orr
15,321 PointsBeen working with the on scroll but it continues to count as you keep scrolling. It needs to only happen once when you scroll over a certain spot that way it won't continue to repeat. Any ideas?
Steven Parker
243,318 PointsJust keep a variable to remember which side of the the threshold you are on, and immediately return from the handler if you're still on the same side. Otherwise, update the container class and flip your variable.