August 17, 2022

Vanilla JSU Parallax Scrolling Effect On Elements

Vanilla JavaScript is a small library to implement the subtle parallax scrolling effect on any element within a document. Use this plug-in to move objects within the document at different speeds when scrolling the page.

parallax scrolling, pure css parallax background image, full page parallax scroll effect, smooth parallax scrolling background image, parallax smooth scrolling

How to make use of 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 component and finished.

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

3. Set the direction of the motion utilizing the data-jsuplxdir attribute.

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

4. Specify the parallax scrolling speed utilizing the data-jsuplxperspective attribute as complying with:

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

Apply Parallax Scrolling Effect On Elements, parallax scrolling website, Vanilla JSU Parallax Plugin/Github, parallax scrolling text effect


See Demo And Download

Official Website(JavaScriptUtilities): Click Here

This superior jQuery/javascript plugin is developed by JavaScriptUtilities. For extra Advanced usage, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.