I wanted to try and build something like this page has where as you scroll down the page the overlay goes away and fully reveals the path… If the overlay just revealed vertically I kinda get, but not sure how they are removing it horizontally as well… Not really sure where to start on this… Anyone have a code pens similar to this? is this considered parallax?
Each of the vertical lines, horizontal lines and corners are separate
<div> elements, each with child
<div> element inside. The corners have an overlay PNG image with appropriate transparency: similarly for the graphic elements.
I like the effect, very clever.
If you look at the classNames for the individual elements, you have .line-filler-from-top and .line-filler-from-left. By checking the className on the element you can determine which transformation to perform, height or width.
Just to share, I was looking at a script called locomotion recently. I thought it was pretty impressive.
It is based on this script
And the repository for it is here
Might be worth investigating