Did you know you can create some parallax effects without using JavaScript? Moving on from the simplest forms of background-position: fixed; on background images, you can create some fairly complex parallax elements using just CSS alone.
Parallax, whilst not very accessible, can be used to progressively enhance a website’s design. If used sparingly, parallax can add a nice touch of movement to otherwise very static web pages.
CSS only parallax
Take a look at this CodePen example.
The main ‘tricks’ used to create the parallax effects are transform-style: preserve-3d;, perspective and transform: translateZ();.
In our example, we’ve added transform-style: preserve-3d; to the body element. But in production, you would likely want to add this to a wrapper around your 3D parallax HTML elements. Equally, setting perspective on an additional inner wrapper of your parallaxing elements would be better practice than setting it to your main or other important semantic HTML elements.
How it works
To make the effect work, we need to employ CSS perspective.
What’s perspective?
For those that haven’t used it before, here’s an explanation from Mozilla’s developer docs.
The perspective CSS property determines the distance between the z=0 plane and the user in order to give a 3D-positioned element some perspective.
It continues…
Each 3D element with z>0 becomes larger; each 3D-element with z<0 becomes smaller. The strength of the effect is determined by the value of this property.
Creating parallax with perspective
The way to use perspective to create parallax effects is to give different z-axis values to your different HTML elements that you wish to parallax. How much they move/will move depends on your perspective value and your z-axis values on each element.
Take another look at the code in our test example on CodePen.
Creating layers
Naturally, when you’re placing objects in 3D space and setting your z-axis differently, you will create a feeling of depth. Some objects will be further away in the 3D space than others, so they appear smaller. This will also create a layered effect on overlapping objects when they move across the 3D space (as you scroll down in the example).
You can additionally add scale() to your transform of the elements you have applied your parallax to. With this, you can visually undo that 3D scaling, so that all your objects appear the same size even though they are in different areas of the 3D space. The objects still parallax and move within the 3D space, scrolling at different speeds, but they all appear at the same size.
Here’s a version with the scale hack on our original example on CodePen.
Getting creative
You don’t just have to use this technique for traditional parallax when scrolling. Getting creative with layouts and interaction can help to create interesting websites that are still light in their code and page weight. Take this other quick CodePen example as a potential product showcase.
Should you use CSS only parallax?
As mentioned, parallax can help to lift static web page designs if you feel it is right for your design and audience. However, parallax effects, along with zoom animations and bouncing messages can cause dizziness, motion sickness, and other similar symptoms for some people. It is therefore important to only include these types of effects for those users who want them. Utilising the prefers-reduced-motion media query, we can lessen or completely remove these parallax effects for users who have chosen this setting in their browser. Read more on creating websites with prefers-reduced-motion in our article on the subject.