Search results
jsDelivr provides a free, fast, and reliable CDN for locomotive-scroll, a library for detecting elements in viewport and smooth scrolling with parallax effects. However, the package failed to load due to a possible internet connection problem.
- Locomotive Scroll
- Usage
- Instance options
- Instance methods
- Progressive playing animations example (like gsap)
- Browser support
- Who's using Locomotive Scroll?
- GeneratedCaptionsTabForHeroSec
Detection of elements in viewport & smooth scrolling with parallax effects.
Basic
With simple detection.
Smooth
With smooth scrolling and parallax. Note: scroll-sections are optional but recommended to improve performance, particularly in long pages.
Advanced
Make it do what you want.
Option\tType\tDefault\tDescription
el\tobject\tdocument\tScroll container element.
name\tstring\t'scroll'\tData attribute prefix (data-scroll-xxxx).
offset\tarray(2)\t[0,0]\tGlobal 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.
Method\tDescription\tArguments
init()\tReinitializes the scroll.
on(eventName, function)\tListen instance events ⬇.
update()\tUpdates all element positions.
destroy()\tDestroys the scroll events.
start()\tRestarts the scroll events.
All data-scroll elements have a progress value. In the on scroll event you can get all current in-view elements.
HTML
Works on most modern browsers. Chrome, Firefox, Safari, Edge...
To get IE 11 support, you need polyfills. You can use your own or include these before our script.
Locomotive Scroll is a library for detecting elements in viewport and scrolling with parallax effects. Learn how to install, use, and customize it with options, methods, and events.
With simple detection. Add the base styles to your CSS file. (function () {. var scroll = new LocomotiveScroll(); })(); _Get the [JS file](https://github.com/locomotivemtl/locomotive-scroll/blob/master/dist/locomotive-scroll.min.js)._. With smooth scrolling and parallax. <div data-scroll-section>. <h1 data-scroll>Hey</h1>.
Dec 16, 2020 · Learn how to use Locomotive Scroll, a library that lets you perform scrolling effects like parallax and triggering animations at scroll points. See examples, setup, attributes, and integration with React.
Fork 16. Star 195. master. README. License. 🚧 WIP 🚧. Loco (native) Scroll. Detection of elements in viewport & smooth native scrolling. The great locomotive-scroll without Smooth Class, merged with Lenis by Studio Freight to optimize the scrolling experience and keep native scrolling.
A simple scroll library used by developers at Locomotive. Built as a layer on top of ayamflow's virtual-scroll, it provides smooth scrolling with support for parallax effects, toggling classes, and triggering event listeners when elements are in the viewport.
