I'm a big fan of Keith Clark's pure CSS parallax technique and have been using it with some success on one of my own sites. Recently, however, I noticed that the background parallax elements, even in his own demo, do not abut the left side of the screen, but leave a gap, the size of which depends on how far back in the 3D space they are rendered.
The culprit, as far as I can tell, is the scrollbar. This scrollbar is supposed to be there (inside the parent parallax div), but it creates a difference between the size of the parent container (in which the 3d space is rendered) and the size of the containers' parallax children, which leaves room for that gap. I see it in the latest versions of Chrome, Firefox, and Safari (though I could have sworn I didn't see it there even a year ago).
This can be sort of fixed by applying a width: 100vw
rule to each parallax group or layer. But while this clears the gap, it places the elements out of alignment with the default center of the view (and so with any elements that do not also have the 100vw
rule applied to them). I would also like a solution that holds to the 'pure CSS' principle as much as possible.
HTML taken from the Keith Clark example:
<div class="parallax">
<div class="parallax__group">
<div class="parallax__layer parallax__layer--base">
<div>Base Layer</div>
</div>
<div class="parallax__layer parallax__layer--back">
<div>Background Layer</div>
</div>
</div>
</div>
CSS:
.parallax { // parent, page-level container
height: 500px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
-webkit-perspective: 300px;
perspective: 300px;
-webkit-perspective-origin-x: 100%;
perspective-origin-x: 100%;
}
.parallax__group {
position: relative;
height: 500px;
height: 100vh;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.parallax__layer {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transform-origin-x: 100%;
transform-origin-x: 100%;
}
.parallax__layer--base {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.parallax__layer--back {
-webkit-transform: translateZ(-300px) scale(2);
transform: translateZ(-300px) scale(2);
z-index: 3;
}