Apply Parallax Scrolling Effect On Elements – JSU Parallax

Category: Animation , Javascript | January 10, 2020
Author: JavaScriptUtilities
Views Total: 298 views
Official Page: Go to website
Last Update: January 10, 2020
License: MIT

Preview:

Apply Parallax Scrolling Effect On Elements – JSU Parallax

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>

You Might Be Interested In:


Leave a Reply