Momentum & Parallax Scrolling Library With Vanilla JavaScript – slickscroll.js

Category: Animation , Javascript | September 21, 2021
Author:Musab-Hassan
Views Total:116 views
Official Page:Go to website
Last Update:September 21, 2021
License:MIT

Preview:

Momentum & Parallax Scrolling Library With Vanilla JavaScript – slickscroll.js

Description:

A lightweight, configurable, open-source Momentum & Parallax Scrolling JavaScript library without third-party dependencies.

How to use it:

1. Install and import the library with NPM.

# NPM
$ npm i slickscrolljs --save
import slickScroll from 'slickscroll.es.min.js';

2. Initialize the library and you’re ready to go.

const slick = new slickScroll;

3. Apply the momentum scrolling effect to the entire document.

slick.momentumScroll({
  root: "body"
})

4. Specify the duration of the animation.

slick.momentumScroll({
  root: "body",
  duration: 800,
})

5. Available easing functions:

  • easeInSine
  • easeOutSine
  • easeInOutSine
  • easeInQuad
  • easeOutQuad
  • easeInOutQuad
  • easeInCubic
  • easeOutCubic
  • easeInOutCubic
  • easeInQuart
  • easeOutQuart
  • easeInOutQuart
  • easeInQuint
  • easeOutQuint
  • easeInOutQuint
  • easeInExpo
  • easeOutExpo
  • easeInOutExpo
  • easeInCirc
  • easeOutCirc
  • easeInOutCirc
slick.momentumScroll({
  root: "body",
  easing: "easeOutQuart",
})

6. Apply a parallax scrolling effect to elements.

slick.momentumScroll({
  root: "body",
  offsets: [
    {
      element: ".parallax-element-1", speedY: 0.8
    },
    {
      element: ".parallax-element-2", speedY: 0.6
    },
    // ...
  ],
})

7. Set the fixed top offset in cases where you have sticky elements like header navigation.

slick.momentumScroll({
  root: "body",
  fixedOffsets: [
    ".site-header"
  ]
})

Changelog:

v1.2.0 (09/21/2021)

  • Working with frontend frameworks
  • DOM nodes directly assignable to offsets and fixedOffsets
  • Improved performance
  • New way of handling scrolling (doesn’t destroy EventListeners)

You Might Be Interested In:


Leave a Reply