Dynamic Performant Parallax Scroll Effect In Vanilla JS – Rallax.js

Preview:

Description:

Rallax.js is a brand new vanilla JavaScript parallax plugin that applies a dynamic, high-performance parallax scroll effect to elements within the document.

Depends on the requestAnimationFrame API to provide the performant animation.

See also:

• Top 10 JavaScript Libraries For Parallax Scroll Effects

How to use it:

Install the Rallax.js with NPM.

# NPM
$ npm install rallax.js --save

Import the rallax component.

import rallax from 'rallax.js'

Apply the parallax scroll effect to elements you specify.

const myParallax = rallax('.element')

Customize the animation speed.

const myParallax = rallax('.element',{
      speed: 0.3
})

Auto disables the parallax scroll effect when the screen size is small than a specified value, e.g. mobile device.

const myParallax = rallax('.element',{
      speed: 0.3,
      mobilePx: false
})

Start/stop the parallax scroll effect manually.

myParallax.start();
myParallax.stop();

Change/get the animation speed.

myParallax.changeSpeed(.8);
myParallax.getSpeed();

Event handlers.

parallax.when(
  () => window.scrollY > 400,
  () => parallax.changeSpeed(1)
)