Minimal Vanilla JS Library For Parallax Scrolling Effect – vanillaInfiniteScroll

Preview:

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>

Changelog:

v0.4.1 (06/24/2018)

• fix placement issue that occurs when append-to is “parent” and parent element is a flexbox