Tiny Smooth Parallax Scroll Effect In Vanilla JavaScript – scrollar.js

Preview:

Description:

scrollar.js is a vanilla JavaScript plugin that makes it simple to apply a smooth parallax scroll effect on multiple elements with different positions.

Works with modern browsers which support rAF and CSS3 transforms.

See also:

• Top 10 JavaScript Libraries For Parallax Scroll Effects

How to use it:

Import the minified version of the scrollar.js library into the document.

<script src="scrollar.min.js"></script>

Add the CSS class scrollar to your parallax element and specify the animation speed in the data-scrollar-speed attribute (supports negative numbers).

<div class="scrollar">
</div>
<div class="scrollar" data-scrollar-speed="2">
</div>
<div class="scrollar" data-scrollar-speed="-2">
</div>

Initialize the scrollar library and done.

var scrollar = new Scrollar();

Default configurations.

var scrollar = new Scrollar(selector, {
    // the parent of scrollar object,
    wrapper: null,
    // direction of the scroll (supports only vertical for now)
    vertical: true, // horizontal: true,
    // speed of the blocks (data-scrollar tags override this config)
    // movement value to 1px scroll (e.g. 0.6 : 1 means the element will scroll 0.6px when the window is scrolled 1px)
    speed: 0.6,
    // amount of travel until stop (in px)
    // prevent extra scrolling
    distance: 1000,
    // callback when element is moved
    callback: null
});