Parallax Scrolling Library For Mobile & Desktop – basicScroll

Category: Animation | October 30, 2018
Author: electerious
Views Total: 1,554
Official Page: Go to website
Last Update: October 30, 2018
License: MIT

Preview:

Parallax Scrolling Library For Mobile & Desktop – basicScroll

Description:

basicScroll is a lightweight, powerful, high-performance parallax scrolling JavaScript library designed for both mobile and desktop.

How to use it:

Install & download the basicScroll library.

# NPM
$ npm install basicscroll --save

Import the basicScroll library.

// ES 6
import basicScroll from 'basicscroll';

// CommonJS:
const basicScroll = require('basicscroll');
<!-- OR -->
<script src="/dist/basicScroll.min.js"></script>

Create a new instance and setup the parallax scrolling effect as follows:

const instance = basicScroll.create({
      elem: document.querySelector('.element'),
      from: 'top-bottom',
      to: 'middle-middle',
      props: { // CSS props
        '--opacity': {
          from: .01,
          to: .99
        }
      }
})

Start the parallax scrolling effect.

instance.start()

Callback functions available.

const instance = basicScroll.create({
      elem: document.querySelector('.element'),
      from: 'top-bottom',
      to: 'middle-middle',
      props: { // CSS props
        '--opacity': {
          from: .01,
          to: .99
        }
      },
      inside: (instance, percentage, props) => {},
     outside: (instance, percentage, props) => {},
})

More API methods.

// Stops the animation
instance.stop()

// Updates instance props and their values.
instance.update()

// Calculates data for the first time
instance.calculate()

// Checks if is active
instance.isActive()

// Returns calculated data.
instance.getData()

Changelog:

v3.0.0 (10/30/2018)

  • Reduced the size of the minified version by almost 50%
  • Object.assign must be supported by the browser

You Might Be Interested In:


One thought on “Parallax Scrolling Library For Mobile & Desktop – basicScroll

  1. Alan

    Hello, thanks for the info.
    Is there a way to implement it twice or more on the same page?
    Regards…

    Reply

Leave a Reply