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 Conor Vanoystaeyen
Conor Vanoystaeyen
16,687 Points

can someone tell me how too do this scroll effect?

This website reformcollective has a scroll effect that gos into the text and has opacity on scroll on the next div. can someone help me with this effect? I don't now how to begin.

The `result` Variable Type

Conor Vanoystaeyen
Conor Vanoystaeyen
16,687 Points

thx for the help Martin. Follow up question, how do you keep the elements in position till the end of the scroll annimation?

Martin Balon
Martin Balon
43,651 Points
Martin Balon
Martin Balon
43,651 Points

I would create a container to hold both background and foreground svg with the 'text'. I would use absolute position and z-index to keep this svg on the top of the background div. Then I would use JavaSript's onscroll method to get scrollY position and pageOffset (or something similar) to get position of the container. The moment user scrolls down to our container then I would dynamically change zoom of the svg and I would disable scroll for the time necessary for svg to get out of the way to reveal background div -> which you can set to be fixed by javascript - then you could allow scroll again so user can keep scrolling down the page and set background div to position relative to cancel fixed position.

But then again -> this is just from the top of my head and I'm not 100% you can do all these things. Also you have to be able to zoom-in when user is scroll up the page - so the animation works both ways.

1 Answer

Martin Balon
Martin Balon
43,651 Points
Martin Balon
Martin Balon
43,651 Points

Hi Conor, If you inspect their website you can see three elements changing their position using CSS translate. You can also check their CSS file and their JavaScript file to see how exactly they achieve this effect. I would personally created white rectangle or square with 'transparent' text and then I would zoom out this svg file on scrollY exposing a div bellow. BTW their website is awesome.