The parallax effect gives the user a depth of field and perspective on a flat web page. This means that different elements scroll at different rates, such as a slow moving background compared to the content in the foreground.
In this article I’m going to show you how to use a simple CSS only parallax effect to make the background image and content scroll independently of each other, giving that nice effect of perspective.
CSS Parallax Demo
See the Pen Parallax Effect by lawnch (@lawnch) on CodePen.
Getting Started: Parallax HTML
The magic of parallax is purely down to the CSS, this makes the HTML very simple.
[html]
<div class="parallax">
<div class="parallax-back">
<div style="display: block; background: url(‘http://www.smple.co/wp-content/uploads/2015/03/photo-wallpapers-minimalist-design-2-on-wall-design-ideas.jpg’) center; height: 600px;">
</div>
</div>
<div class="parallax-base">
<div style="display: block; background-color: white; margin: 0 auto; width: 80%; padding: 5rem 8rem;">
<h2>Parallax Effect</h2>
This is a basic parallax effect using only CSS.
If you want to see more on this then please visit <a href="http://adam-bray.com/">Adam-Bray.com</a>
</div>
</div>
</div>
[/html]
What we’ve done here is create one wrapper .parallax
with two child elements .parallax-base
and .parallax-back
.
parallax
: hold our parallax elementsparallax-back
: the background element that scrolls at the slower speedparallax-base
: the foreground element that scrolls at a faster speed
Where the Magic Happens: Parallax CSS
The .parallax
class is the most integral here. By defining a height and perspective we’re able to keep the perspective in the center of the page, giving us the desired 3D effect. We must also set overflow-x
and overflow-y
, which will allow the content to scroll and keep further elements positioned relative to the parent.
[css]
.parallax {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 1px;
}
div[class*="parallax-"] {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
div.parallax-base {
padding: 70vh 0;
transform: translateZ(0);
}
div.parallax-back {
transform: translateZ(-1px) scale(2);
}
[/css]
Our next style is the basic parallax layer, which is applied to all our parallax elements. By defining position: absolute;
we pull the element out of the parent element, and fill the viewport.
Finally we have the two parallax content layers .parallax-back and .parallax-base. By defining their position on the z-axis we can slow down or speed up their scroll speed. By moving a layer backwards along the z-axis we’ll find that the content will shrink. To counter this we need to use the scale()
function to rebalance the size.
Conclusion
In this article we’ve covered how to create a CSS only parallax effect without the need for any Javascript.
Now you know how to use two basic parallax layers, why not try using three or four. You can create amazing websites with this effect, it’s simply a case of playing around and seeing what you can create.
Subscribe for Updates
Get notified about my latest content first and receive invitations for subscriber only competitions.