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

Locomotive Scroll is a modern JS library that object detection in the viewport and smooth scrolling with parallax effects.

More options:

  • Custom trigger offset.
  • Smooth scrolling.
  • Touch screen.
  • Custom scroll bar.
  • Supports adhesive elements.
  • Vertical or horizontal directions.

Must Read – A Smooth 3D Parallax Tilt Effect JavaScript Library | vanilla-tilt.js

How to make use of it:

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

OptionTypeDefaultDescription
elobjectdocumentScroll container element.
namestring'scroll'Data attribute prefix (data-scroll-xxxx).
offsetarray(2)[0,0]Global in-view trigger offset : [bottom,top]
Use a string with % to use a percentage of the viewport height.
Use a numeric value for absolute pixels unit.
E.g. ["30%",0][100,0]["30%", 100]
repeatbooleanfalseRepeat in-view detection.
smoothbooleanfalseSmooth scrolling.
initPositionobject{ x: 0, y: 0 }An object defining the initial scroll coordinates on a smooth instance. For example: { x: 0, y: 1000 }
directionstringverticalScroll direction: vertical or horizontal
lerpnumber0.1Linear interpolation (lerp) intensity. Float between 0 and 1.
This defines the “smoothness” intensity. The closer to 0, the smoother.
getDirectionbooleanfalseAdd direction to scroll event.
getSpeedbooleanfalseAdd speed to scroll event.
classstringis-inviewElement in-view class.
initClassstringhas-scroll-initInitialize class.
scrollingClassstringhas-scroll-scrollingIs scrolling class.
draggingClassstringhas-scroll-draggingIs dragging class.
smoothClassstringhas-scroll-smoothHas a smooth scrolling class.
scrollbarContainerobjectfalseSpecifies the container element for the scrollbar to be appended in. If false, a scrollbar will be appended to the body.
scrollbarClassstringc-scrollbarScrollbar element class.
multipliernumber1Factor applied to the scroll delta, allowing to boost/reduce scrolling speed (regardless of the platform).
firefoxMultipliernumber50Boost the scrolling speed of Firefox on Windows.
touchMultipliernumber2Multiply touch action to scroll faster than finger movement.
scrollFromAnywherebooleanfalseBy default locomotive-scroll listens for scroll events only on the scroll container (el option). With this option set to true, it listens to the whole document instead.
gestureDirectionstringverticalDefines which gesture direction(s) scrolls in your instance. You can use :

 

  • vertical
  • horizontal
  • both
tablet & smartphoneobject Object allowing to override some options for a particular context. You can specify:

 

  • smooth
  • direction
  • horizontalGesture

For tablet the context you can also define breakpoint (integer, defaults to 1024) to set the max-width breakpoint for tablets.

reloadOnContextChangebooleanfalseAllows to reload the page when switching between desktoptablet and smartphone contexts. It can be useful if your page changes a lot between contexts and you want to reset everything.
resetNativeScrollbooleantrueSets history.scrollRestoration = 'manual' and calls window.scrollTo(0, 0) on locomotive-scroll init in Native Class. Useful if you use transitions with native scrolling, otherwise we advise setting it to false if you don’t want to break History API’s scroll restoration feature.

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

Element attributes

AttributeValuesDescription
data-scroll Detect if in view.
data-scroll-idstring(Optional) Useful if you want to scope your element and get the progress of your element in the viewport for example.
data-scroll-container Defines the scroll container. Required for basic styling.
data-scroll-section Defines a scrollable section. Splitting your page into sections may improve performance.
data-scroll-classstringElement in-view class.
data-scroll-offsetstringElement in-view trigger offset : bottom,top
First value is bottom offset, second (optional) is top offset.
Percent is relative to viewport height, otherwise, it’s absolute pixels.
E.g. "10""100,50%""25%, 15%"
data-scroll-repeatbooleanElement in-view detection repeat.
data-scroll-callstringElement in-view trigger call event.
data-scroll-positionstringtopbottomleft or right
Window position of the in-view trigger.
data-scroll-speednumberElement parallax speed. A negative value will reverse the direction.
data-scroll-delaynumberElement’s parallax lerp delay.
data-scroll-directionstringElement’s parallax direction. vertical or horizontal
data-scroll-sticky Sticky element. Starts and stops at data-scroll-target position.
data-scroll-targetstringTarget element’s in-view position.

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

Instance methods

MethodDescriptionArguments
init()Reinitializes the scroll. 
on(eventName, function)Listen to instance events ⬇. 
update()Updates all element positions. 
destroy()Destroys the scroll events. 
start()Restarts the scroll events. 
stop()Stops the scroll events. 
scrollTo(target, options)Scroll to a target.
target: Defines where you want to scroll. Available values types are :

 

  • node : a dom element
  • string : you can type your own selector, or use values "top" and "bottom" to reach scroll boundaries
  • int : An absolute scroll coordinate in pixels
options (optional, object) : Settings object. Available values are:

 

  • offset (integer) : Defines an offset from your target. E.g. -100 if you want to scroll 100 pixels above your target
  • callback (function) : Called when scrollTo completes (note that it won’t wait for lerp to stabilize)
  • duration (integer) : Defines the duration of the scroll animation in milliseconds. Defaults to 1000
  • easing (array) : An array of 4 floats between 0 and 1 defining the Bezier curve for the animation’s easing.
    Defaults to [0.25, 0.00, 0.35, 1.00]
    See https://greweb.me/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation
    Keep in mind this will also be affected by the lerp unless you set disableLerp to true.
  • disableLerp (boolean) : Lerp effect won’t be applied if set to true

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

Official Website(locomotivemtl): Click Here

This superior jQuery/javascript plugin is developed by locomotivemtl. For extra Advanced Usage, please go to the official website.

Share