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

Category: Animation , Javascript | December 19, 2018
Author: jwparktom
Views Total: 1,254
Official Page: Go to website
Last Update: December 19, 2018
License: MIT

Preview:

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

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:

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
});

You Might Be Interested In:


Leave a Reply