Animate Elements On Scroll With Parallax Effect – locomotive-scroll

Preview:

Description:

locomotive-scroll is a modern JS library that applies a smooth, subtle, configurable parallax scroll effect to elements when scrolled into view.

More features:

• Custom trigger offset.
• Smooth scroll.
• Touch-enabled.
• Custom scrollbar.
• Supports sticky element.
• Vertical or horizontal directions.

How to use it:

1. Install the package and import the LocomotiveScroll module.

# NPM
$ npm install locomotive-scroll --save

import LocomotiveScroll from 'locomotive-scroll';

2. Or load the necessary JavaScript & CSS files from the dist folder.

<script src="dist/locomotive-scroll.min.js"></script>
<link href="dist/locomotive-scroll.min.css" rel="stylesheet" />

3. Initialize the LocomotiveScroll with default settings.

const myScroll = new LocomotiveScroll();

4. Apply the LocomotiveScroll to target elements using the data-scroll attribute:

<div data-scroll>Element To Animate</div>

5. Config the parallax scroll effect with the following data attributes:

• data-scroll-container: scroll container
• data-scroll-section: Scrollable section. Useful for sectioned pages
• data-scroll-class: in-view class
• data-scroll-offset: Trigger offset (ex.: “10”, “100,50%”, “25%, 15%”)
• data-scroll-repeat: Repeat the viewport detection
• data-scroll-call: Execute a call function here
• data-scroll-speed: Parallax speed
• data-scroll-target: Target element
• data-scroll-position: top or bottom
• data-scroll-direction: vertical or horizontal
• data-scroll-delay: Parallax delay
• data-scroll-sticky: Sticky element
• data-scroll-id: Element id

<div data-scroll
     data-scroll-speed="1">
     data-scroll-call="EVENT_NAME"
     >
     Element To Animate
</div>

6. All possible settings to config the library.

const myScroll = new LocomotiveScroll({
      el: document,
      name: 'scroll',
      offset: [0, 0],
      repeat: false,
      smooth: false, // smooth scroll
      direction: 'vertical', // or horizontal
      lerp: 1, // inertia
      class: 'is-inview',
      initClass: 'has-scroll-init',
      scrollbarClass: 'c-scrollbar',
      scrollingClass: 'has-scroll-scrolling',
      draggingClass: 'has-scroll-dragging',
      smoothClass: 'has-scroll-smooth',
      scrollbarContainer: false,
      getSpeed: false,
      getDirection: false,
      multiplier: 1,
      firefoxMultiplier: 50,
      touchMultiplier: 2,
      scrollFromAnywhere: false,
      gestureDirection: 'vertical', // or horizontal, both
      reloadOnContextChange: false,
      resetNativeScroll: true
});

7. API methods.

// initialize the instance
myScroll.init();
// re-calc & update the postion
myScroll.update();
// destroy 
myScroll.destroy();
// restart
myScroll.start();
// stop
myScroll.stop();
// scroll to a specific element with an offset
myScroll.scrollTo(target, options);

8. Event handlers.

myScroll.on('call', (func) => {
  // do something
});
myScroll.on('scroll', (obj) => {
  // do something
});

Changelog:

v4.1.4 (05/03/2022)

• Prevent keyboard scrolling depending on activeElement type

v4.1.3 (10/21/2021)

• Fix scrollbar locks after scrolling with mousewheel.

v4.1.0 (02/19/2021)

• Update

v4.0.3 (11/17/2020)

• Update

v4.0.1 (11/16/2020)

• Add horizontal scrolling
• Update export to only import the native Class
• Update scrollTo parameters with the options object (offset, duration, easing…)
• Add context system to set specific options for desktop , tablet and mobile separately
• Rewrite the instance options
• Add data-scroll-id=”” attribute to select elements
• Add currents “in view” elements as object in the on scroll event.
• Add a progress value from 0 to 1, while the element is in the viewport

v3.6.1 (10/15/2020)

• Fix moveScrollBar calculations

v3.5.0 (05/28/2020)

• Add scrollFromAnywhere option
• Add multiplier option
• Rename inertia option to lerp
• Bugs fixed

v3.1.8 (11/30/2019)

• Fix safari polyfill