Creating a multilayer parallax website with CSS

As I have been coding so many different one-page websites in the last few weeks, I’ve been thinking about different layouts, designs and techniques to bring life to a single page that might otherwise end up looking flat and boring.

I’ve always had mixed feelings about using parallax as a design technique on website. While I enjoy the 3D effect, I find that sometimes it can be overwhelming and, as a result, it distracts the viewer from engaging with the actual content.

However, when done right, parallax scrolling can add a subtle beauty to a one-page design. One of the best uses of parallax I’ve come across is on Claudio Guglieri’s A Love Letter to Freelancing. His design inspired me to look for some practical applications of parallax where the technique can work in harmony with the content.

It turns out, parallax scrolling can be an excellent tool in long-form journalism, storytelling and interactive data visualizations. Some of my favorite examples that I’ve recently discovered include:

  1. The Boat
  2. Almost everything we think we know about Addiction is wrong
  3. A visual introduction to machine learning

parallax

Excited by the possibilities of applying parallax scrolling effects to my future work, I set out find a way of creating the effect through just CSS. A couple of Google searches later I arrived at Keith Clark’s wonderful article and demos for creating Pure CSS Parallax Websites. So, I decided to test out the technique for myself.

Following Keith’s directions, I created a simple page with 4 groups of parallax layers with png images. This technique mainly uses the two CSS properties transform and perspective to arrange the layers and the content. The perspective property applied to the parent div holding the 4 groups of layers determines the intensity of the 3D effect of the content.

Each parallax group has 1-3 layers positioned at various depths along the Z-axis with the use of the transform: translateZ() function. This property also controls the scrolling speed for the elements placed on that layer. The higher the negative Z value, the slower it will move.

The transform-style:preserve-3d property applied to each group ensures that the children of the group exist on their individual 3D planes. A side-effect of positioning elements along the Z-axis is that their size changes based on how close or far away from the user the element is placed. A quick fix for this distortion in size is by applying transform:scale() property.

As Keith points out, setting overflow-y:auto on the parallax div surrounding the layers is very important in creating the parallax effect as it ensures that the descendant elements are rendered in relation to the fixed position of this parent element.

Finally, when working with elements grouped together on layers, it’s important to allow the overflow content to be visible and then control the layer positions by setting the desired z-index value for each group.

The rest is just a matter of absolute positioning of images and content on the different layers.

The pen below gives you a peek at what I created with these simple CSS properties. I recommend viewing it as a full page to experience the effect. You can read a more detailed description of this parallax wizardry on Keith’s blog post. I hope you will try this technique out, I’d love to see what you create!

P.S. I haven’t had the opportunity to test it extensively, but it seems to work perfectly on Chrome and Safari, and works with some minor hiccups on Firefox.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s