Apply Parallax Scrolling Effect On Elements – JSU Parallax

Category: Animation , Javascript | March 18, 2021
Views Total:749 views
Official Page:Go to website
Last Update:March 18, 2021


Apply Parallax Scrolling Effect On Elements – JSU Parallax


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>


v0.5.0 (03/18/2021)

  • Update

v0.4.4 (10/03/2020)

  • Update

You Might Be Interested In:

Leave a Reply