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