Rellax.js – Free Parallax Features Using Vanilla JavaScript
Parallax scrolling looks incredible when done right. It’s not a feature you’ll want on every website but for creative sites and landing pages, parallax elements grab attention fast.
There are tons of free JavaScript libraries for animated scrolling effects but many are bloated or just too complex for some people.
That’s why I recommend Rellax.js for your parallax needs. It’s a free open source plugin built on vanilla JavaScript, so it doesn’t have any dependencies.
By default, it requires only a simple function call to assign the parallax class to page elements. Then, as you scroll, these elements stay fixed and move along with the user’s viewpoint.
You can customize these elements to appear closer, further away, or behind page elements. This creates the illusion of depth on the page and it all works through one simple JavaScript library.
Read Also: How to Implement Infinite Page Scroll Effect in Static Webpages [Tutorial]
All of the Rellax source code is available for free on GitHub if you wanna download a copy.
The entire setup uses a single JS function targeting the .rellax class like so:
var rellax = new Rellax('.rellax');
Note you can use pretty much any class you want, but the example demo uses .rellax for simplicity’s sake.
From here, you just wrap your parallax elements inside a div with the .rellax class and set the speed attribute. This works through the data-rellax-speed custom attribute which accepts values from -10 to +10.
Here’s an example snippet from the HTML on the demo page:
<div class="rellax" data-rellax-speed="-7"> I'm extra slow and smooth </div>
You can also center elements on the page and customize the element positions via CSS.
Rellax doesn’t tell you how to structure the page or how to define CSS elements on your page. All it does is create a natural parallax scrolling effect with pure JavaScript. How you use this is totally up to you.
To see a live demo, take a peek at the main site or browse through the GitHub repo. This includes some documentation, along with links to live websites using Rellax.js.
And best of all, the team is constantly willing to take pull requests, so if you notice any issues or have suggestions for features just send a quick message over to the team.