Parallax
Translated from German using DeepL.
Date: January 2023
Reading time: 5 minutes
After reading this blog post, you will understand what Parallax is and what you should pay attention to when using it. You will also find out which techniques can be used for implementation.
What is Parallax?
Parallax is a graphical technique where different elements on a web page are moved at different speeds or slows when scrolling to create a 3D effect.
This technique was used in the 1930s to create animations. Individual layers are recognizable in the graphic. The further away an element is to appear, the slower it has to move.
The frontend technique has been around since 2011 and has become very trendy. The scroll effects have not disappeared today, but are used in a more subtle style.
Examples
Nowadays there are several different ways in which the effect is used. This table provides an overview:
| Category | Links | Image |
|---|---|---|
| Image background (best known Parallax application) | fixed (opens in a new tab); zoom on scroll (opens in a new tab) |  |
| Different scroll speeds | example (opens in a new tab) |  |
| Image cutout | https://codepen.io/alexoneal/full/OBqaoe (opens in a new tab) |  |
| Horizontal scroll | https://codepen.io/pehaa/full/zYxbxQg (opens in a new tab) |  |
| Layers | bring forth (opens in a new tab); compress (opens in a new tab) |  |
| Change of perspective | https://codepen.io/Craaftx/full/yQGpwa (opens in a new tab) |  |
| Depth Effect | https://codepen.io/dazulu/full/VVZrQv (opens in a new tab) |  |
| Movement through mouse | https://codepen.io/caseycallis/full/pwEWxo (opens in a new tab) |  |
Real examples
We now have a good overview of the individual types of use. But is this gimmick even used by companies?
Below is a list of 12 sites that have implemented Parallax. On the right I have noted down my thoughts when visiting each website.
| Site | Category | Advantages | Disavantages |
|---|---|---|---|
| http://everylastdrop.co.uk/ | Story | Good storytelling, visually imaginable, memorable | Facts cannot easily be searched for again, user does not know how long it will be until he is finished |
| https://www.sbs.com.au/theboat/ (opens in a new tab) | Story | Very good storytelling, chapter overview (you can move around) | Long loading |
| http://2011.beercamp.com/ | See content from the start | Not supportive, less legible | |
| http://www.mdmoch.com/ | Speed of content and sections | Impressive for developers | Difficult to access information, not easy to find your way around the site, scrolling is unfamiliar and not very pleasant |
| https://antonandirene.com/ (opens in a new tab) | Moving graphics | Visually appealing | - |
| https://longshotfeatures.com/ (opens in a new tab) | Scroll direction | User engages with the page, interesting behavior | Can be unfamiliar, may be off-putting |
| http://porschevolution.com/#1960s | Sections | Nice transition between cars -> can compare models, provides options to disable the sound | Music can get in the way when you want to compare two models |
| http://www.feedmusic.com/ | Play animations | - | Graphics are blurred and distract from the text, graphics are not meaningful but still take up much more space than the text |
| https://webflow.com/web-design-art-history?rfsn=1534242.c8be44&utm_source=refersion&utm_medium=affiliate&utm_campaign=1534242.c8be44&subid=cbq-row-1237997992519881500 (opens in a new tab) | Movement of content | Graphics used nicely | Difficult to keep an overview |
| http://www.firewatchgame.com/ | Layers | Targeted use, does not disturb or distract, immerses you in the world | - |
| https://www.apple.com/iphone-14-pro/ (opens in a new tab) | Video, text, graphics | Good experience the first time | Too much movement when looking for something |
| https://www.moooi.com/en/a-life-extraordinary (opens in a new tab) | 3D space | The user can easily imagine the furniture, 3D world is conveyed realistically, buttons are offered so that scrolling can be dispensed with | User may scroll too far, waiting times |
Advantages and disadvantages
Advantages
If implemented well, a parallax effect can achieve the following:
- Draw the user's attention to important elements of the website
- Improve the user experience
- Make the website more visually appealing and interesting
- Make the website stand out from others -> Unique
- Increase interaction -> User stays on the page longer and sees more content
- Can use it for good storytelling
- Visually appealing
Disadvantages
- However, there are also some problems that can occur when using the effect:
- Runtime of the website can be slowed down as more resources are needed to render the animations -> User sees black screens/loading animations
- It may be difficult for users with limited movement or visual impairments to use the website
- Can lead to website clutter and degrade the user experience
- It is often not easy to use on mobile
- Text is often illegible or ignored
- Good timing of animations is difficult. Many users don't want to wait for an effect and scroll quickly to search for keywords
- Too much movement can be unsightly for the UX
- Users usually don't find Parallax very impressive
- Banner blindness -> Users have learned over time to categorize such movements as "visual noise" and ignore them
Technical implementation
There are many ways to implement Parallax. A few possibilities are listed here:
- CSS styling: Explained in the examples
- CSS animations: Implement animations with keyframes
- JS: You can also implement the parallax effect with JavaScript by using the scroll event to track the user's position while scrolling and adjust the position of the elements accordingly.
- JS Libraries: https://greensock.com/gsap/ (opens in a new tab)
- jQuery: There are also many jQuery plugins that make it easy to implement the parallax effect. An example of such a plugin is
Parallax.js(opens in a new tab). - Video: 3D effects can also be created with videos that are played using JS while scrolling. Apple does this again and again.
- Pre-built solutions: There are also many pre-built solutions for the parallax effect that can be implemented with minimal effort. An example of this is
Skrollr(opens in a new tab).
Fixed Background
This method has been around the longest. Here the background is fixed, usually with background-attachment:fixed.
Here is an example: https://codepen.io/k_w/pen/YzjGVEz (opens in a new tab)
Disadvantages:
- This does not work properly on mobile
- Only 2 layers possible
- Scrolling speed cannot be adjusted
3D Translations
When we move something in our digital world, there are similar physical effects as in reality. The z-axis can be used to control the scrolling speed of things.
What is further away (negative translation on the z-axis) moves slower.
What is closer (positive translation on the z-axis) moves faster.
transform: translateZ(-1px);
Here is an example: https://codepen.io/k_w/pen/LYBRyPX (opens in a new tab)
Conclusion
A good implementation of the parallax effect can make a website stand out and stay in the visitor's mind. However, the following must be observed during implementation:
- It makes the most sense to use Parallax where users are not pursuing a clear goal
- The page becomes slower
- Animations should generally not be surprising
- The content must be prioritized
- Navigation is usually helpful
- After the page has been completely scrolled, the effects should not be retriggered but remain in the final position
- The effects should be minimized on mobile
- It makes sense to offer an option to deactivate the effects (motion sickness)
- Do not change the scroll behavior -> Unnatural scrolling makes operation very unpleasant
There are still areas of application for this technology. However, you should not only include this effect because the implementation is challenging. Because normal visitors usually don't know or appreciate this.