Animate Elements On Scroll With Parallax Effect – locomotive-scroll

Category: Animation , Javascript , Recommended | November 30, 2019
Author: locomotivemtl
Views Total: 199
Official Page: Go to website
Last Update: November 30, 2019
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-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
<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,
      elMobile: document,
      name: 'scroll',
      offset: 0,
      repeat: false,
      smooth: false, // smooth scroll
      smoothMobile: false, // smooth scroll on mobile
      direction: 'vertical', // or horizontal
      inertia: 1,
      class: 'is-inview',
      scrollbarClass: 'c-scrollbar',
      scrollingClass: 'has-scroll-scrolling',
      draggingClass: 'has-scroll-dragging',
      smoothClass: 'has-scroll-smooth',
      initClass: 'has-scroll-init',
      getSpeed: false,
      getDirection: false
});

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, offset);

8. Event handlers.

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

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

Changelog:

v3.1.8 (11/30/2019)

  • Fix safari polyfill

You Might Be Interested In:


Leave a Reply