Author: | locomotivemtl |
---|---|
Views Total: | 8,293 views |
Official Page: | Go to website |
Last Update: | May 3, 2022 |
License: | MIT |
Preview:

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
- data-scroll-id: Element id
<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, name: 'scroll', offset: [0, 0], repeat: false, smooth: false, // smooth scroll direction: 'vertical', // or horizontal lerp: 1, // inertia class: 'is-inview', initClass: 'has-scroll-init', scrollbarClass: 'c-scrollbar', scrollingClass: 'has-scroll-scrolling', draggingClass: 'has-scroll-dragging', smoothClass: 'has-scroll-smooth', scrollbarContainer: false, getSpeed: false, getDirection: false, multiplier: 1, firefoxMultiplier: 50, touchMultiplier: 2, scrollFromAnywhere: false, gestureDirection: 'vertical', // or horizontal, both reloadOnContextChange: false, resetNativeScroll: true });
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, options);
8. Event handlers.
myScroll.on('call', (func) => { // do something }); myScroll.on('scroll', (obj) => { // do something });
Changelog:
v4.1.4 (05/03/2022)
- Prevent keyboard scrolling depending on activeElement type
v4.1.3 (10/21/2021)
- Fix scrollbar locks after scrolling with mousewheel.
v4.1.0 (02/19/2021)
- Update
v4.0.3 (11/17/2020)
- Update
v4.0.1 (11/16/2020)
- Add horizontal scrolling
- Update export to only import the native Class
- Update scrollTo parameters with the options object (offset, duration, easing…)
- Add context system to set specific options for desktop , tablet and mobile separately
- Rewrite the instance options
- Add data-scroll-id=”” attribute to select elements
- Add currents “in view” elements as object in the on scroll event.
- Add a progress value from 0 to 1, while the element is in the viewport
v3.6.1 (10/15/2020)
- Fix moveScrollBar calculations
v3.5.0 (05/28/2020)
- Add scrollFromAnywhere option
- Add multiplier option
- Rename inertia option to lerp
- Bugs fixed
v3.1.8 (11/30/2019)
- Fix safari polyfill
I know Html and Css, but I’m totally new to javascript. I don’t know where to add step 3.
Any help?