16 fantastic examples and uses of the parallax effect

Parallax (also called "Parallax scrolling") is a web design effect that consists of simulating the movement of objects on a web at different speeds and in different "layers". By creating the illusion that there is a background and figures in the foreground, it manages to trick our brain into thinking we are looking at a 3D landscape.

The Parallax is based on a phenomenon of perception called "parallax", which consists of the position of an object in the visual field changing according to the point from which it is observed. If this sounds complicated to you, we're going to do a very simple experiment so that you can see it with your own eyes:

- Choose an object that is a couple of meters away from you (for example, a picture on the wall or a window could help us).
- Extend your arm with your thumb upwards.
- Cover your left eye and observe the position of your thumb in relation to the reference object in the background.
- Now cover your right eye and watch it change... surprise!

Parallax's animation technique itself is nothing new, since it was used in animated films and even in 80s video games. But until recently it had not jumped to the web pages.

Parallax is a very useful resource for improving the attractiveness of websites and encouraging users to stay longer and interact with them. Since the effect is manifested by scrolling, users have an extra incentive to browse. In addition, it is very appropriate for vertical screens, such as those on mobile phones.

Parallax scrolling is one of the simplest solutions that webmasters could rely on, especially if they want to obtain immediate impact on the site visit, faster loading time, and interesting effects that people could enjoy.

There are now many online resources that offer Parallax tutorials in order for interested website owners to also experience the increasing number of visitors with such an amazing welcome page. In this round up, we have 16 fantastic examples and uses of the parallax effect for you.

Enjoy!

1. Scrolldeck for jQuery Parallax plugin  DEMO

Scrolldeck is a cool jQuery plugin that make it easier to create amazing scrolling presentation like Slide Animations, Image Slides and parallax effects for your project.

2. Super Scroll Orama DEMO

Super Scroll Orama jQuery plugin for supercool scroll animation for supercool scroll animation. NOTE: No longer under active development.

3. Page Pilling DEMO

This jQuery plugin allows you to create different "layers" for the design of your website, which are stacked on top of each other. When you scroll or access the URL, a slide animation is activated to reveal them. Page Piling is compatible with all platforms (computers, tablets and mobiles) and works in most browsers.

4. Stellar DEMO

A jQuery plugin designed to facilitate the implementation of Parallax scrolling. The animation of each element can be individually configured using data attributes. It even allows you to create backgrounds that reposition themselves when scrolling and return to their original position at a certain point. You can do some serious scrolling with it.

5. jParallax DEMO

6. ScrollMagic:  DEMO

One of the most popular and functional jquery plugins. It allows you to create animation effects based on the position of the scroll: you can leave objects fixed, move them or animate them as you move around the screen, as well as create Parallax effects. It's highly customizable, lightweight, and has good documentation and external resources.

7. jQuery Scroll Path DEMO

8. StarScroll DEMO

Create a div with purpose as your background .. activate plugin; animated or reactive as the user scrolls. The plugin automatically will fix the div so it works seemlessly. A jQuery plugin that goes where no plugin has been before – creating a parallax scrolling starfield

9. Parallax.js DEMO

It reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene… Oh, you don’t have a smart device? No worries, if no gyroscope or motion detection hardware is available, parallax.js uses the position of your cursor instead. Radical.

10. freshD DEMO

The jQuery 3D Parallax Plugin magically animates your objects in a dynamic created 3D world. For those of you who don’t know what Parallax is, the best way to describe it is the way objects in the background tend to move less than objects closer to the viewer, the most front objects also transform themselves to the viewer’s point of view. Here’s a wiki link for something more indepth.

11. Skrollr (by Alexander Prinzhorn) DEMO

The best advantage of this plugin is its simplicity, since it doesn't require knowledge of Javascript or jQuery (with HTML and CSS is enough). skrollr uses data attributes to animate any HTML element, but the effects will only last while the user is scrolling.

5 Examples of Parallax in Action

And finally, let's get some inspiration! These are some of the sites that are already using Parallax to achieve incredible effects. Do you want to join in with yours?

12. FireWatch

This site has certainly managed to get all the juice out of Parallax, as it has up to 6 layers! that move at different speeds to give a feeling of depth, from a cliff in the foreground to the distant mountains. As we scroll down, the page displays the information found on the first page.

13. The Walking Dead

What is the process of an actor from being a normal person to becoming a zombie in The Walking Dead? This page explains it through a comic book style infographic that makes great use of Parallax in the backgrounds. Thus, it seems that the protagonist really moves through a 3D world.

14. Peugeot Hybrid4

This graphic novel is an excellent example of storytelling in the service of a brand. Throughout the story, the website presents the features of the new Hybrid4 technology.

The user can play the novel in automatic mode or take charge of moving the scroll himself so that the effects are activated. In addition, the sound also contributes to creating a harmonious Parallax experience.

15. NASA

What better use of Parallax than to illustrate the vastness of space? On this page, the user can undertake his own space explorer journey and travel from planet to planet against a background of moving stars.

16. Avenir Clinic

A very simple example, but ideal to show that Parallax can serve to bring to life the websites of brands of all kinds. In this case, it is a dental clinic that has combined coloured modules that can be displayed on a white background. And in this simple way, it has managed to create an attractive website that stands out from the competition.

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.