Parallax Scrolling Library For Mobile & Desktop – basicScroll

Preview:

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.4 (01/18/2021)

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