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.
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
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?
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.
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.Banner vector created by upklyak - www.freepik.com
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.
JQuery is still a useful and pragmatic library, but chances are increasingly that you’re not dependent on using it in your projects to accomplish basic tasks like selecting elements, styling…
Is jQuery going to die in 2019?
Not all developers know the marquee tag of HTML, that allows you to create a scrolling piece of text or image displayed that is shown horizontally or vertically on the DOM.…
Parallax Landscape Scenes Built Entirely With CSS and HTML
Web design trends come and go, but the parallax effect has, well, stuck around. Parallax scrolling has had a big impact on user interface design, on both websites and mobile…
Useful jQuery code snippets for responsive websites
When you have to manage a web project, jQuery can be of great help. In this article, we have compiled some jQuery tips and tricks for making and enhancing responsive…