Performant Parallax Scrolling Library – SimpleParallax

Category: Animation , Javascript | March 1, 2017
Author: christopherwk210
Views Total: 2,000
Official Page: Go to website
Last Update: March 1, 2017
License: MIT

Preview:

Performant Parallax Scrolling Library – SimpleParallax

Description:

A lightweight, fast JavaScript library that enables smooth, high-performance parallax scrolling effects on DOM elements using CSS3 transforms and requestAnimationFrame API.

Installation:

$ npm install SimpleParallax

How to use it:

Load the minified version of the SimpleParallax library for faster page loading.

<script src="/path/to/SimpleParallax.min.js"></script>

Define an array of element objects containing target elements and animation speed.

var elements = [
    {
      element: document.getElementById('section1'),
      speed: 1
    },
    {
      element: document.getElementById('section2'),
      speed: 0.2
    },
    {
      element: document.getElementById('section3'),
      speed: 2.5
    }
];

Active the parallax scrolling effect on the elements you specify.

var parallax = new SimpleParallax(elements);

You Might Be Interested In:


Leave a Reply