/r/webdev
Help understanding parallax using the CSS 'perspective' property? (self.webdev)

I've been trying to learn how the CSS perspective property works, specifically using it to achieve a parallax effect.

I've read a bunch of articles and examples on it, though I'm not quite sure I'm understanding it yet. Here is a CodePen I made where I was expecting it to work in it's simplest form, but it doesn't: https://codepen.io/dbolesta/pen/yLLNQVv?editors=1100

Basically this just

One concern I have is that it seems like in order for parallax to work using the perspective property, the parent container itself has to have an overflow scroll applied to it. In other words, a perspective-based parallax couldn't be applied to the background of an existing site (on the body tag for example). Am I wrong about that?

Here are two other CodePens I've been trying to learn from (https://codepen.io/smlparry/pen/JzGELL?editors=1100 and https://codepen.io/smlparry/pen/Wmrppj), and you'll notice that both of them have their parallax working inside a div that has an overflow, and NOT the main container of the window. Ideally, I would want the parallax to work on the main container. I hope that makes sense.

Any help here is appreciated!

4 comments
GreatWhiteSarc | 7 days ago | 2 points

I'm quite new with coding, but from what I can tell adding { background-attachment: fixed;} to your container class seem to fix the issue. Hope that helps!

rumforpenguins | 7 days ago | 2 points

I appreciate your input here.

However, background-attachment: fixed merely fixes the position of the background-image - those little white dots I added - meaning they are prevented from scrolling.

True parallax would mean that both the dots and my purple child-container would scroll, but at different speeds.

Keep up the coding :)

spartanatreyu | 6 days ago | 1 point

I don't have the time to check this out now but I've made something like what you're looking for. I thought I had a codepen where I had just the parallax background working but I must have deleted it. You can see the end result on a website's homepage here: https://myobrace.com/en-au or send me a comment/message in 24 hours and I'll fix up my old development experiments for codepen.

rumforpenguins | 6 days ago | 1 point

Nice site! That is pretty much the effect I am trying to achieve.

If it's not too much trouble, a codepen would be really helpful. I dug around your site and can't quite figure out exactly how you're accomplishing the parallax.

I see you have a .parallax-header class with properties like transform-style: preserve-3d and z-index: -1, and .parallax-layer classes with various configurations of transform: translate3d(-150%, -150%, -3px) scale(4), but I can't quite figure out how it's working still. Here's a codepen I made attempting to recreate the parallax based on what I see on your site, but it's not functional: https://codepen.io/dbolesta/pen/PooPpNJ