Detection of elements in viewport & smooth scrolling with parallax

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

<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, 0],
      repeat: false,
      smooth: false, // smooth scroll
      smoothMobile: false, // smooth scroll on mobile
      direction: 'vertical', // or horizontal
      lerp: 1, // inertia
      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,
      multiplier: 1,
      firefoxMultiplier: 50,
      touchMultiplier: 2,
      scrollFromAnywhere: 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
});

Download Details:

Author: locomotivemtl

Source Code: https://github.com/locomotivemtl/locomotive-scroll

#javascript