Rellax.js – Free Parallax Features Using Vanilla JavaScript

Parallax scrolling looks implausible when finished right. It’s not a underline you’ll wish on each website though for artistic sites and alighting pages, parallax elements grab courtesy fast.

There are tons of giveaway JavaScript libraries for animated scrolling effects though many are magisterial or usually too formidable for some people.

That’s because we suggest Rellax.js for your parallax needs. It’s a giveaway open source plugin built on vanilla JavaScript, so it doesn’t have any dependencies.

By default, it requires usually a elementary duty call to allot a parallax category to page elements. Then, as we scroll, these elements stay fixed and pierce along with a user’s viewpoint.

You can customize these elements to seem closer, serve away, or behind page elements. This creates a illusion of depth on a page and it all works by one elementary JavaScript library.

All of a Rellax source formula is accessible for giveaway on GitHub if we wanna download a copy.

The whole setup uses a singular JS function targeting a .rellax category like so:

var rellax = new Rellax('.rellax');

Note we can use flattering most any category we want, though a instance demo uses .rellax for simplicity’s sake.

From here, we usually wrap your parallax elements inside a div with a .rellax category and set a speed attribute. This works by a data-rellax-speed custom attribute that accepts values from -10 to +10.

Here’s an example snippet from a HTML on a demo page:

div class="rellax" data-rellax-speed="-7"
  I'm additional delayed and smooth

You can also center elements on a page and customize a component positions around CSS.

Rellax doesn’t tell we how to structure a page or how to conclude CSS elements on your page. All it does is create a healthy parallax scrolling effect with pristine JavaScript. How we use this is totally adult to you.

Rellax.js parallax pluginRellax.js parallax plugin

To see a live demo, take a look during a main site or crop by a GitHub repo. This includes some documentation, along with links to live websites regulating Rellax.js.

And best of all, a group is constantly peaceful to take lift requests, so if we notice any issues or have suggestions for facilities usually send a discerning message over to a team.

Add Comment