Apply Parallax Scrolling Effect On Elements – JSU Parallax

Preview:

Description:

A minimal Vanilla JavaScript library for implementing a subtle parallax scrolling effect on any elements within the document.

Use this plugin to move objects within the document at different speeds on page scroll.

How to use it:

1. Download and insert the JavaScript file ‘vanilla-jsuparallax.js’ into the HTML file.

<script src="js/vanilla-jsuparallax.js"></script>

2. Apply the parallax library to the target element and done.

new vanillaJsuParallax({
    items: document.querySelectorAll('.element')
});

3. Set the direction of the movement using the data-jsuplxdir attribute. Default: ‘top’.

<span class="element" data-jsuplxdir="bottom"><span>

4. Specify the parallax scrolling speed using the data-jsuplxperspective attribute as follow:

<span class="element" data-jsuplxperspective="100"></span>
<span class="element" data-jsuplxperspective="200"></span>
<span class="element" data-jsuplxperspective="300"></span>

Changelog:

v0.5.0 (03/18/2021)

• Update

v0.4.4 (10/03/2020)

• Update