Today, we're going to write about the parallax effect, similar to parallax scrolling, and how to implement it to improve your landing page. In webdev, they say mobile first - well, this engine will react to the movement of a smart device, offsetting layers depending on their depth within a scene.
First impressions are very important especially when you want to obtain a new audience.
And it's increasingly more important to have an amazing welcome page to make that ‘wow’ effect to the visitor, to make him/her get hooked. Additionally, with Parallax.js we can make use of the gyroscope in mobile devices to show the movement instantly. That's right, it will react to the orientation of a mobile phone and tablets with gyro.
Let's get into it.
First about the effect
Parallax scrolling as a web design effect is pretty much a known trend or technique to the background moving simulation. Since HTML5 and CSS3 were introduced, it became quite popular with web designers.
The object in the foreground like the text content on your site is moving at a different speed than the background image. Thus by scrolling up and down we create the illusion of the ‘depth’ as the content is in different layers. This is called a layer method. Layers that move more quickly are perceived to be closer to the virtual camera.
Note that some mobile devices do not support parallax scrolling, in that case the media queries are used to turn off the effect however.
If you want to read more about the phenomenon itself here's a link to wikipedia, let's focus on the practical use of it.
What is Parallax JS?
There are many online resources for parallax tutorials, in this article we will explain the use of Parallax.Js
It's the project of two gentlemen, Matthew Wagerfield and Claudio Guglieri, their parallax engine reacts to the orientation of a smart device.
Where no gyroscope or motion detection hardware is available, like on the classic browsers, the position of the cursor is used instead.
We create a simple page, for the purpose of implementing this feature on it. In our case we create a website presenting our good friend, a local artist who is making handmade balloons. This will serve our purpose, because we can use the balloons for our scene.
Code step by step:
1. Installation
Add to your .
This is the last version. Note it’s uglyfied minified. If you like the .zip version more, you need to download it and include the link like you see bellow in your code.
2. Create HTML elements
This is CSS code to it. We added a linear gradient to the background image, to make it a bit darker at the bottom.
We need a container element, we chose
.scene {
position: absolute;
width: 100%;
height: 70%;
top: 20vh;
left: 0;
min-height: 360px;
}
.parallax {
position: relative;
overflow: hidden;
height: 100%;
width: 100%;
}
.parallax:after {
content: "";
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 90%);
}
3. Run JS instance
As we have our content ready, create Parallax.js instance, providing your scene element as first parameter.
The element should be the one directly ‘above’ those elements you want to be in parallax.
let ourParallax = document.getElementById('parallax');
let parallaxInstance = new Parallax(ourParallax);
4. Configuration
First we add our background image. It's placed inside ‘parallax’ div. About data-depth, the value has meaning of the ‘depth vision’, basically 0 is no parallax and 1 is the top value, the element with data-depth=”1” will move the most. This value should be used to set your scene so that the objects in the foreground have this value set near 1 and the objects in the background have the minimal value.
