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

Category: Animation , Javascript , Recommended | December 18, 2018
Author: ChrisCavs
Views Total: 1,095
Official Page: Go to website
Last Update: December 18, 2018
License: MIT


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


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:

How to use it:

Install the Rallax.js with 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.


Change/get the animation speed.


Event handlers.

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

You Might Be Interested In:

Leave a Reply