To keep things manageable, I have three values set and assigned to classes that I can apply to individual parallax effect is created when the user is scrolling through a website and multiple backgrounds or images are moving at different speeds. Each of the images is given a “depth” by setting a different translateZ value.
The Matterday site applies the parallax to individual artwork pieces to give them a floating feeling relative to each other. The demo (and lots of examples you may see) uses the parallax effect on full-width sections which creates a lot of movement.
#PARALLAX HTML FULL#
That full markup ends up looking something like this: The parallax structure setup looks something like this (again, I encourage you to read Keith’s awesome tutorial): Īfter each background/content section, a foreground section is added with class. This creates visual parallax, where things farther in the distance move slower than those up close to you (like looking at scenery go by outside a car window). I don’t intend to duplicate Keith’s tutorial here, so at a high level, what the CSS is doing is moving layers forward and backward in space (with translateZ). This article by Keith Clark and the accompanying demo are super great for dissecting how this works.
This is a pretty tried and true way to have different elements on a page scroll at different speeds. The majority of the sections are using a CSS parallax technique using a combination of position, perspective, and 3D transform. So here’s how the background and content sections scroll before we add in the foreground layers. The fixed background gradient and dot pattern, despite being only on the right side of the page, help the two sides feel cohesive. We’ve created a little “window” for the backgrounds to pass beneath to the left of the content. Linear-gradient ( to top, var (-body-bg ) var (-bg-position ) ,īox-shadow : 0 0 0. A border-radius and box-shadow provide the viewport’s rounded rectangle shape.īackground-image : linear-gradient (to bottom, var (-body-bg ) var (-bg-position ) , 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): 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.
#PARALLAX HTML PLUS#
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.
#PARALLAX HTML HOW TO#
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. Guides & Tutorials Fun CSS-only scrolling effects for Matterday
0 kommentar(er)
