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

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

Preview:

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

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:

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

You Might Be Interested In:


Leave a Reply