Minimal Vanilla JS Library For Parallax Scrolling Effect – vanillaInfiniteScroll

Category: Animation , Javascript | December 29, 2016
Author: JavaScriptUtilities
Views Total: 162
Official Page: Go to website
Last Update: December 29, 2016
License: MIT

Preview:

Minimal Vanilla JS Library For Parallax Scrolling Effect – vanillaInfiniteScroll

Description:

vanillaInfiniteScroll is a lightweight, pure Vanilla JavaScript library that makes it easier to apply the familiar Parallax Scrolling effect to any DOM elements using HTML5 data attributes.

How to use it:

Load the main JS file vanilla-jsuparallax.js at the end of the html document so the page loads faster.

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

Create a new vanillaJsuParallax instance and specify the target elements to be scrolled with a parallax effect.

new vanillaJsuParallax({
    items: document.querySelectorAll('.el1, .el2')
});

Adjust the scrolling direction using the data-jsuplxdir attribute as this:

<!-- Scroll to bottom -->
<span class="el" data-jsuplxdir="bottom"><span>

Adjust the perspective in pixels using the data-jsuplxperspective attribute:

<span class="el" data-jsuplxperspective="300"><span>