Returning to 2011, the parallax scrolling effect created buzz and emerged as a new trend in websites design. Many trends have come and gone since then, but this effect has established its place and is not planning to leave any time soon.
In this post, we will explain what parallax scrolling is and play around with this effect using a JavaScript library called Rellax. This library allows creating the same effect by setting different speeds at which elements scroll relative to the page’s default scrolling speed.
What exactly is the Parallax Effect?
Parallax motion occurs when different elements move at different speeds relative to each other. This effect is very popular as it can create an illusion of depth.
When we are moving, objects closer to us seem to move faster than objects that are further away.
The Parallax effect is essentially an optical illusion. Since the human eye perceives objects closer to us as larger than those farther away, it feels like those distant objects are moving slower.
This technique is popular in many mediums, for example, in video games where it is common to see different background layers. In fact, this illusion was first adopted for traditional animation by Disney when they created the movie Snow White and the Seven Dwarfs, and even back when they created the game that late 70s kids know as Super Mario.
Take a look at this website and the next one, both use the effect we are talking about in different ways, but the principle is the same and we will discuss it in this post. Before we proceed, I will present a very basic example that simply describes how the same parallax effect works during scrolling (parallax scrolling in other words).
See the Pen
Simple Parallax Effect by Roee Yossef (@roeey)
on CodePen.
Each of the boxes you see rises as we scroll down the page. The middle box scrolls at the page’s own scrolling speed (i.e., without the parallax effect), the left box in the example scrolls fast relative to the page and the right one slow relative to the default page scroll.
So let’s say we scroll the page by 100 pixels, the fast box will actually move something like 130 pixels, and the slow box, in contrast, will scroll about 70 pixels… got it, friends? In any case, to do this we used the cute JavaScript library we mentioned at the beginning, called Rellax.
Here is another example of text over an image. Note that the text scrolls at a different speed from the image itself:
The Rellax Library
Rellax is a lightweight JavaScript library developed by a design agency called Dixon & Moe. The library does not rely on jQuery or any other library. We will explain about Rellax with examples.
As a start, take a look at the following example that simulates a journey through space. During the journey (journey = scrolling), we pass through several rocks of different shapes and sizes to the right and left of the text.
When I say rocks, I mean those images, or those elements appearing next to the running text and not on those stars appearing at the top of the screen.
Here is an example. I highly recommend watching the examples in this post through codepen and on a relatively wide screen.
See the Pen
Part 1 – Parallax by Roee Yossef (@roeey)
on CodePen.
Using the Rellax library, we will cause those rocks to move at different speeds during scrolling than the default page scroll speed. Let’s start…
Loading the Rellax Library
The first thing we need to do is, of course, to load the library itself. Since we’ve already explained in many posts how to load assets, namely JavaScript and CSS files, in WordPress sites, I won’t go over it again, but let’s see how to simply load it in standard HTML:
<script src="./javascripts/rellax.min.js"></script>
Activating the Rellax Library
After loading the library, we’ll add another line of JavaScript to activate Rellax. Note that we are passing a string to the Rellax method intended to identify or target the elements to which we want to change the scroll speed. In our case, these will be the elements with the rellax class.
var rellax = new Rellax('.rellax');
We need to add the aforementioned class directly in the HTML of those elements representing the rocks. In our case, we’ll add it to all elements with the floating-rocks class.
<div class="floating-rocks rellax">
<img src="images/rock1.svg">
</div>At this stage, we will see the parallax effect active on these rocks as shown below (but I’m sure you won’t be impressed):
See the Pen
Part 2 – Parallax by Roee Yossef (@roeey)
on CodePen.
The rocks at this stage move slower than the text displayed on the screen, which is pretty nice, but whether you noticed or not, all the rocks move at exactly the same speed during scrolling. We want to set different speeds for each of the rocks, and we do this using data attributes that we add to the HTML of those elements.
Rellax Library Settings
Rellax provides a number of options, or actually a number of parameters that we can pass to it and through which we can influence the way each element moves. We focus on two of these parameters:
1. The data-rellax-speed parameter
The first parameter is data-rellax-speed. This parameter allows us to set the scrolling speed of the element relative to the page’s scroll speed.
The value should be an integer, a negative value defines movement slower than the page’s scroll speed, and a positive value sets movement faster than the default page scroll speed.
Using this parameter is done directly on the HTML of the element as follows:
<div class="floating-rocks rellax" data-rellax-speed="8">
<img src="images/rock1.svg">
</div>It’s worth noting that if we want to give a realistic sense of depth, you should determine that elements closer to us on the Z-axis should have faster movement than elements further away.
2. The data-rellax-percentage parameter
When Rellax calculates the distance of movement that the elements need to move during scrolling, it does so based on the height of the page. As a result, elements at the bottom of the page will move a greater distance on the Y-axis than those at the top of the page.
In this situation, elements at the bottom of the page may appear in an unexpected and not necessarily desirable location. This can be circumvented using Centering. This option will change the position of the elements according to their position in the viewport, so when we scroll to those bottom elements, they will likely appear in a more correct position.
I am aware that this explanation of the feature is not sufficient, forgive me – there is a lack of information about this library on the web 🙂
Using Centering is done by adding the data-rellax-percentage attribute to the HTML of each of the elements in question, as shown in the following example:
<div class="floating-rocks rellax" data-rellax-speed="8" data-rellax-percentage="0.5">
<img src="images/rock1.svg">
</div>
And here’s the result.. I remind you to view the codepen and on a wide screen in order to notice the differences compared to the previous example. Also, don’t despair if you don’t notice the difference – your experimentation and errors will explain it better.
See the Pen
Part 3 – Parallax by Roee Yossef (@roeey)
on CodePen.
For your information, you can also set centering as a global setting in JavaScript when activating the library:
var rellax = new Rellax('.rellax', {
center:true
});
We will implement the parallax effect on additional elements
We will enhance our page by adding the effect also on the stars at the top of the screen. For this purpose, we will change the HTML of those images, namely, we will add the rellax class and set the scrolling speed as we wish:
<img class="rellax" data-rellax-speed="1" src="https://savvy.co.il/wp-content/uploads/2020/08/earth.png" alt="">
<img class="rellax" data-rellax-speed="2" src="https://savvy.co.il/wp-content/uploads/2020/08/makemake.png" alt="">
<img class="rellax" data-rellax-speed="4" src="https://savvy.co.il/wp-content/uploads/2020/08/moon.png" alt="">Adding smooth animation to the movement of the aforementioned objects
If you noticed in the first example we presented, or saw the elements floating at the top of this post – surely you noticed that they move very smoothly. We achieved this using a simple CSS transition that we add to the rellax class. Here is an example of how we did it:
.rellax {
transition: transform 4s cubic-bezier(0, 1, 0.5, 1) 0s;
}Take a look at the page we created after this change and you will discover a much smoother and more pleasant movement of the elements….
See the Pen
Part 4 – Parallax by Roee Yossef (@roeey)
on CodePen.
Summary
There are several additional parameters and a few methods that we did not mention in this post for the Rellax library. These allow more flexibility and playing with those elements to which we made the change. Although the documentation for this is lacking, you are welcome to take a look at the GitHub page of the library to get more information about the options.
As we explained, the use of Parallax Scrolling allows for movement and depth and is a gateway to an interesting user experience and cool designs not mentioned in this post. If you have cool examples of websites using this effect or perhaps other ways to reflect the depth of elements, we would be very happy if you share them with us.
As always, you are welcome to ask questions or yell at me in the comments below… 🙂 For more information on Parallax Scrolling, take a look at the following links:
