seem to be having issues with my pure css parallax, im using the concept from this article. However this doesn't seem to be working for me at all.
Am I going about it all wrong?
You can inspect my code using a debugger here.
Edit: Sorry I though providing the link would let you inspect the code easier rather than read and try and understand pasted code snippets.
I want to have parallax effects on sections of my website.
Here you can see my HTML, there are more parts but im currently trying to get my header working with a parallax scrolling background:
<body class="parallax">
<header class="parallax__group">
<div class="parallax__layer parallax__layer--back darken"></div>
<div class="parallax__layer parallax__layer--base flex alignvcenter">
<div id="hdr-logo">
<img src="images/logo.svg" alt="Mobile Paint Solutions" class="responsive-img">
</div>
<div id="hdr-hint">
<img src="" alt="" class="responsive-img">
</div>
<div id="hdr-nav">
<nav>
<a href=""><span>Home</span></a>
<a href=""><span>About</span></a>
<a href=""><span>Gallery</span></a>
<a href=""><span>Reviews</span></a>
<a href=""><span>Pricing</span></a>
<a href=""><span>Contact</span></a>
</nav>
</div>
</div>
</header>
And here are my LESS styles:
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__group {
position: relative;
height: 100vh;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
}
.parallax__layer--back {
transform: translateZ(-1px) scale(2);
}
.parallax__layer--deep {
transform: translateZ(-2px) scale(3);
}
However currently the background is not moving at all, can anyone explain this?
2 Answers
I believe the reason the effect (parallax or not) does not work is because you used <body> as the host element. Probably some of the properties it uses have no effect on <body>. I assume we're talking perspective and its vendor prefixed counterparts.
The obvious fix is to use a <div> as host, not <body>. I tried to use some styles and images from the website you linked, but it doesn't look too good. You got the idea though.
Adding
background-attachment: fixed;
to your
<div class="parallax__layer parallax__layer--back darken"></div>
or actually class named
parallax__layer--back
fixed the thing.
Edit: () this works, gentleman.
