16 fantastic examples and uses of the parallax effect

by Janeth Kent Date: 09-04-2020 jquery tutoriales parallax scrolling effect javascript

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

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.

Banner vector created by upklyak - www.freepik.com
by Janeth Kent Date: 09-04-2020 jquery tutoriales parallax scrolling effect javascript hits : 39074  
Janeth Kent

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.


Related Posts

Vanilla JavaScript equivalent commands to JQuery

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?

For a while, JQuery's relevance has been a topic of debate among web developers. We were curious as web developers interested in Javascript to know what others have to say…

Best 5 Javascript NewsTicker Plugins

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.…

Working with JSON in JavaScript

JSON is short for JavaScript Object Notation and an easy - to - access way to store information. In short, it gives us a collection of human - readable data…

Top 10 JavaScript Books 2019

Though simple for beginners to pick up and play with, JavaScript is a flexible, complex language that you can use to build full-scale applications. If you're an aspiring web developer then…

6 JavaScript Utility Libraries you Should Know in 2019

Nowadays Javascript is the most popular and widely used programming language, so the ecosystem around it constantly grows. However, it is expected that the small "standard library" of Javascript will remain…

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…

10 JavaScript podcasts for web developers

1. Syntax.fm  Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks…

JavaScript Manual for Beginners

The JavaScript Manual shows you how to use JavaScript and gives an overview of the language. I   GETTING STARTED ABOUT Created by Netscape in 1995 as an extension of HTML for Netscape Navigator…

Top JavaScript Libraries in 2018

As Javascript remains the most popular and widely used programming language in 2018, so grows the ecosystem around it. JavaScript has gained immense popularity over the span of a few years.…

30 Reference Guides for JavaScript: jQuery, Node.js, and React

This is a list intended to introduce new developers to JavaScript (jQuery, Node.js and React) and help experienced developers learn more.   jQuery jQuery API (Official) View → jQuery Cheatsheet (Devhints) View → jQuery Cheat Sheet (JavaScript Toolbox) View → jQuery Quick…

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…