Using a Pure CSS Parallax Effect in Production

We’re launching a new homepage this fall and we’d love to have a nice, robust, performant parallax effect and Keith’s solution seems like a great fit. However, there were some weird behaviors that needed to be fixed before we could roll this out into production.

Let’s start off by implementing a simple recreation of the demo in the article:

This effect is really cool, but there are some issues, namely:

The horizontal scrolling issue is caused by the browser incorrectly calculating the bounding box of the parallax component. While layer 0 (the background) and layer 1 (the foreground) appear the same size to us because of perspective, the browser incorrectly treats it as being twice as large as it should be. This causes the size of the page to be twice the correct size, resulting in extra space to the bottom and right. The solution to this is to then

Until browsers fix how the calculate the size of the page, we’ll need to just shove the extra space to the top left of the page, where it won’t increase the scrollable area. We can accomplish this by add the following rules to the parallax container and the parallax layers respectively:

We now have a sensible bounding box and users can no longer scroll horizontally or see whitespace below the parallax effect.

Now that the horizontal scroll has been fixed, we can tackle the whitespace to the left of the layers. The solution to this is going to require transforming the layers, so for convenience, I introduced an SCSS mixin to generate the CSS for a parallax layer.

This generates the classes parallax-layer — 0 through parallax-layer — 5, with higher numbers being further back and slower-scrolling.

The root cause of this issue seems to be some sort of rounding error by the browser, and fundamentally is really hard to fix. My solution is to just mess around with the scaling factor and hope that the rounding errors cancel out at some point. This means replacing the scale($depth + 1) function with something like scale(1.02 * $depth + 1.02). This gets the layers pretty close to lining up, which is about as good as you can ask for. This tweak comes purely from experimentation, so if you’re able to find a more elegant solution, please let me know.

Here’s the final, (theoretically) bug-free implementation:

We now have an implementation of Keith Clark’s pure CSS parallax effect that can be used in production. It’s performant, doesn’t have any glaring issues, and most importantly looks cool.

Related posts:

Today 3rd 07 2018 marks the second day of week2 Andela Bootcamp experience. This comes after being able to make it through week1 selection that took place on Friday last week. Progressing from week 1…

Sentiment analysis is one of the most interesting marketing tools we have since it examines and analyzes the feelings that underlie user comments and reviews. In other words, the development of…

This article was very interesting because it really called out news organizations lack of coverage when a controversial topic comes about. The problem being especially in this case this was news. It…