A Lightweight JavaScript Library For Easy Momentum & Parallax Scrolling | slickscroll.js

jquery-smooth-custom-scrollbar

Momentum scrolling is smooth and fancy websites with smooth scrolling should allow the page to flow smoothly when scrolling.

momentum scrolling javascript, what is momentum scrolling, jquery smooth custom scrollbar, postcss momentum scrolling, scroll to top library, momentum scrolling

How to make use of 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 also you’re able to go.

const slick = new slickScroll;

3. Apply the momentum scrolling impact to the whole doc.

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

4. Specify the duration of the animation.

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

5. Available easing features:

slick.momentumScroll({
  root: "body",
  easing: "easeOutQuart",
})

6. Apply a parallax scrolling effect to components.

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

7. Set the fixed high offset in instances the place you might have sticky components like header navigation.

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

Momentum & Parallax Scrolling Library, Slickscroll Plugin/Github, smooth scrolling mouse wheel, smooth scrollbar


See Demo And Download

Official Website(Musab-Hassan): Click Here

This superior jQuery/javascript plugin is developed by Musab-Hassan. For extra Advanced Usages, please go to the official website.