Parallax Scrolling Library For Mobile & Desktop – basicScroll

Category: Animation | January 18, 2021
Author:electerious
Views Total:545 views
Official Page:Go to website
Last Update:January 18, 2021
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.4 (01/18/2021)

  • 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