Parallax Effects Compared: 5 Choices to Consider
Parallax effects remain one of the hottest web design trends. This animated scrolling technique happens when background and foreground move at different speeds while the user scrolls so that there are two independent layers moving at the same time.
This effect can be used for any number of website types and is a fun way to create – and increase – user engagement. The nice thing about parallax effects is that you don’t have to use them on every page of a design; parallax scrolling is a great homepage technique to help drive users to calls to action or other content.
Parallax effects create an element of depth and distance and a greater sense three-dimension than some other techniques, making users feel like part of the design.
The downside to parallax effects is that they don’t always work on mobile devices. (But there are some workarounds for that as well in the tutorial at the end of this article.)
Here are five parallax effects and styles to consider. (Make sure to click through the links to see exactly how each animation works.)
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
1. Animation to Show Change
Use parallax effects to show change in a project. Layers of movement can convey a distance in time, space or location.
Parallax effects best showcase change when they work with the content of the website.
Porsche Evolution, above, shows change over time with changes to the background and car in the foreground of each image. (Turn the sound up and the music changes by decade, too.)
The design keeps users scrolling because you want to see what the car will look like next. This technique can work in chronological order (as seen here) or reverse chronological order. And a key to making it work is that this site works in both directions – even the music goes back – if you scroll up versus down.
Sonance uses parallax to show another kind of change – change in location throughout the design. Parallax effects are part of the overall navigation pattern of the website and there’s a cue to where in the design (location) users are throughout the experience.
2. Encourage Scrolling
The reason parallax effects can help create engagement is because they encourage scrolling to keep users interacting with the design for a longer period of time.
Many designs featuring parallax effects include a “scroll” instruction or cue right on the homepage to help encourage this interaction from the start. (The homepage for The Walking Dead Zombiefied includes this instruction on the page before the featured image above.)
The Walking Dead website does something a little different with parallax to encourage interaction – scrolling takes users across the screen as the character moves through different comic-style panels – rather than up and down.
3. Movement and Color
One of the most fun ways to use parallax scrolling is to incorporate color into different content “panels” to showcase elements or portfolio projects. Color change and animation can signify something new.
Color is also an attention-grabbing design tool that can help draw users in.
Werkstatt, above, uses a start white and gray outline with parallax layers between elements and text. But an additional hover action brings each project to life with color. The combination of effects works well because the rest of the design is simple and it encourages users to interact with each individual element.
Lois Jeans takes another parallax approach using color. Each new color highlights a different part of the clothing campaign – shoppers can see the jeans on models in different natural environments featuring fire, air, water and earth.
4. Make Information Easier to Digest
Parallax effects can help make complex information or heavy blocks of text smaller, more readable and easier to digest. It’s an interesting concept when you think about moving type, but the actual practice involved moving containers that hold type.
The examples above show two different applications of this concept.
Melanie David has a long intro on her about screen. The left side showing the navigation element – About – does not move while users can scroll through the text on the right. When the text block ends both sides of the page move to the next section. It’s a great solution for a text block that is longer than the visual content area.
Le Duc restaurant uses individual blocks for different sections of the menu that pop in based on the way you would read and order food items. The animations are simple with the fun fish background – which tells users something about the dining establishment – and makes the menu easy to digest.
5. Visualize “Digital” Reality
One of the greatest uses of parallax effects is to help users visualize something they can’t otherwise see. More designs are using a combination of three-dimensional and parallax animation to create more realistic experiences.
These 3D designs tend to fall in the realm of a more cartoon style experience, such as Madwell, above, but can also have a more VR feel when the design works with a specific type of device.
One of the classic examples of a site using parallax effects that has been around for some time is the Seattle Space Needle website. It uses an upward scroll technique to mimic how it would look to ride up to the top of the landmark.
Parallax scrolling moves the skyline against the interior of the building with some call to action messaging and a great navigation bar that shows how high up the location is. The design is educational, adventurous and shows the user something that’s hard to imagine without the animated effect.
3 Great Parallax Resources
Ready to create a parallax effect for your next project? These tutorials and code snippets will help you add an animated effect to your design that can help draw in users and keep them engaging longer.
- How to Create a Parallax Scrolling Effect: The w3schools tutorial takes you through creating a moving container effects and provides ways to use media queries to get a similar effect on mobile devices.
- Parallax Scrolling Website Demo: See exactly how this technique works with a simple demo and explanation.
- 15 Captivating Parallax Effects from CodePen: The list showcases some great parallax pens to jumpstart your creativity and you can go play with each one.
Conclusion
While parallax effects are trendy and fun, they aren’t for every project. It’s also important to consider that some audience on some devices might struggle with navigating a website that includes a lot of animation.
Take inventory of your users and their preferences before adding a parallax effect. Start small with parallax in one location, such as the homepage, and track analytics to see if it is working for you (increased time on site it one clue that it is working).
Use parallax when it works with your content and messaging. This trendy technique should be fun to design and interact with.