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.
Object Detection in Viewport and Smooth Scrolling With Parallax Effects | Locomotive Scroll
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 });
Animate Elements On Scroll With Parallax Effect, Locomotive Scroll Plugin/Github
See Demo And Download
Official Website(locomotivemtl): Click Here
This superior jQuery/javascript plugin is developed by locomotivemtl. For extra Advanced Usages, please go to the official website.
Be First to Comment