CSS Paralax Effect

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.1507

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 elements
• parallax-back: the background element that scrolls at the slower speed
• parallax-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.