Animate Elements On Scroll With Parallax Effect – locomotive-scroll

Category: Animation , Javascript , Recommended | May 3, 2022
Author:locomotivemtl
Views Total:8,293 views
Official Page:Go to website
Last Update:May 3, 2022
License:MIT

Preview:

Animate Elements On Scroll With Parallax Effect – locomotive-scroll

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

You Might Be Interested In:


One thought on “Animate Elements On Scroll With Parallax Effect – locomotive-scroll

  1. Singh Visuals

    I know Html and Css, but I’m totally new to javascript. I don’t know where to add step 3.
    Any help?

    Reply

Leave a Reply