It uses linear-gradient (shown in the screenshot in red) to obscure the areas above and below the “viewport” and the inside is transparent (to show the background layer beneath). overlay container has a position: sticky so it stays fixed to the top even as its container scrolls. I keep adding sections and they create a long page you can scroll through like you would expect: Īnd is rendered like this (shown here with overlay and foreground hidden): The markup looks like this: Watch all 9 seasons of The Office four times through. The background layer is split into two halves, with the background artwork on the left and copy on the right. And finally the foreground includes the pieces of artwork that scroll on top of both previous layers. The background layer includes the patterned backgrounds that show through the viewport layer plus the copy on the right. The overlay layer includes the rounded rectangle “viewport” on the left. The structure of the page can be simplified down to three main layers. So creative layering is the path I took to try and bring some additional interest to static visuals. You could technically have elements animating on a loop, but you wouldn’t be able to control when in the sequence someone might have it visible in their viewport. Elements can’t be told how to change they are effectively in one state forever. With CSS alone you can’t inform the page where you are with things like scroll position and triggers (not yet anyway). This time around I wanted to explore the idea of layers obscuring and revealing things to create different illusions and to experiment with scroll speeds. Sorry, your browser doesn’t support embedded videos. I started with a concept I used for a previous version of that utilized fixed positioning and z-index to create layered scrolling artwork. And since I’m me, I wanted to see what I could do with just CSS. As you know, a narrative-heavy website is just begging for some fun scrolling effects. The narrative portion of the site encourages folks to imagine what they could do with that time - whether it be small changes to daily routines or taking big swings. That’s a lot of time! And we hope folks can spend that time on things that matter to them. Turns out switching to Netlify saves development teams one day a week per developer. Last week we launched a li’l project called Matterday.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |