Object Detection in Viewport and Smooth Scrolling With Parallax Effects | Locomotive Scroll

More options:

1. Install the package deal and import the LocomotiveScroll module.

# NPM
$ npm install locomotive-scroll --save

import LocomotiveScroll from 'locomotive-scroll';

2. Or load the required JavaScript & CSS information 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 focus on parts utilizing the data-scroll attribute:

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

5. Config the parallax scroll impact with the next data attributes:

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

6. All attainable 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 strategies.

// 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
});

Must Read – Simple and Easy To Use Parallax Scrolling Plugin for jQuery | scrolly

Instance options

Must Read – A Plugin For Vue That Adds A Parallax Effect Directive By rellax.js

Element attributes

Must Read – jQuery Add Smooth Links and Scroll Buttons to Anchor Links

Instance methods

Read More – 

Amazing Touch-Friendly 3D Parallax Hover Effects | Atropos
A Concise, Lightweight, and Efficient Canvas Library for Cool Particle Effects | JParticles

See Demo And Download