Parallax 2.0 effect, what is it and how is it used in the design?
Given the fall into disuse of Flash and the rise of Material Design, alternatives have been sought to give websites a certain dynamism to counteract their natural "flat" appearance.
"''A
One of these alternatives is to choose to generate effects and animations in JQuery, being the Parallax Effect (in Spanish parallax), an increasingly widespread trend in the world of web design and animation.
Surely you have seen it thousands of times when entering a website, scrolling and noticing that the background seems to move at a different speed than the content, creating a slight effect of depth and revealing parts that you did not see before.
And although it seems a very current trend, the Parallax Effect is actually a trick with a lot of history. Therefore, on this occasion, we will make a reboot of our previous entry and explain more thoroughly what parallax is and how it is used in Design.
The Modern (but Common) Parallax Effect
Parallax is a design principle of animation, which plays with human perception, in order to create an illusion of spatial depth with two-dimensional means of representation. To understand it better, we will first talk about its origins.
Parallax (from the Greek paralaxis for change, difference) defines a phenomenon of perception by which the position of an object in the visual field changes relative to the point from which it is observed.
This can be exemplified if we raise the thumb at the height of the face, while opening and closing the right and left eye alternately. We will notice that, while the background remains static, our thumb apparently changes position thanks to the distance of our eyes. Simple isn't it?
And although the Parallax Effect is barely appreciated in our day to day, it constitutes one of the foundations of spatial perception. In this way, light reflections from nearby objects move faster on the retina than those from objects at a certain distance, generating an illusion of depth induced by movement.
Animating mice and patrolling the moon
As we mentioned in the introduction, the Parallax Effect is actually a very old trick, invented by Walt Disney to give his films a slight three-dimensionality, trying to achieve greater realism.
The invention itself is called "multiplane camera", since the superposition of planes to generate depth generates the Parallax Effect. I share a video that shows the operation of the Disney multiplane camera.
Later, video game programmers of the 80's imported this concept in order to create the illusion of three-dimensionality with two-dimensional means. Classic games of the type Jump'n'Run or Shoot'em up like Super Mario, Moon Patrol or Jungle Hunt, are a great example of this effect in action:
Ideal for Storytelling and Web Design
Although the Parallax Effect has been used in web design since the late 2000s, it would not be until the Nike nikebetterworld.com page (offline) caused a huge media impact in 2011.
Thus setting a precedent for the trend in web design that uses the Parallax Effect to create an impression of depth in a two-dimensional medium such as the web.
However, although the Parallax Effect is more than interesting to add value to the tedious scroll and surprise the user with something that is not expected, it is not convenient to use it for the simple fact of following the trend. The presence of such effects can be as surprising as it is tiring, for users.
The ideal is to take advantage of this resource as a narrative complement. This possibility of storytelling of Parallax, makes it perfect for landing pages, or websites that try to immerse the user in a story, causing a much more fun communicative experience and close to other media such as video games or comics.
Notable examples
The Parallax Effect polarizes opinions. While many users appreciate the design with this type of effects produced by the movement, others are already tired of a medium no longer so modern, especially if it is used for the sole purpose of being exhibited without a concept that justifies it.
When does the Parallax Effect enrich a website? This depends above all on what you want to achieve with the project and the public. What we can not deny is that it has proven to be an ideal medium to tell stories, so here we share a compilation of pages with Parallax that surely end up convincing you, if you still had doubts, of the incredible of this effect.
Perspective that changes the way we see
Although in principle attractive, scroller pages with Parallax Effect, contain an undeniable potential to improve the storytelling of a brand, but it has also caused its massive (and excessive) use since 2011.
At the end of the day, parallax effects or any other type of animation should be used when they help improve the user experience, highlight content, products, services or encourage the call to action. It goes in that sense, very hand in hand with the principles of material design of which we have already spoken in this blog.
However, the appeal generated by the Parallax Effect is undeniable, as it helps modify the perspective that people have about what a website is and changes the way they see a brand or product. And you, do you dare to give depth to your website? Whether with an online store, landing page or blog, with our Web Design service, forget about missing opportunities and start connecting with everyone.Get to know us!
Do you know more example to share with us? Would you like us to talk about some ways to add this and other effects to your pages?
Don't forget to leave your comments.
Best regards!
