From 811334f474cc8aeddda2213d97b2028acc2ecf16 Mon Sep 17 00:00:00 2001 From: Haim Date: Mon, 8 Jan 2024 12:12:36 +0200 Subject: [PATCH] Update README.md Sort Instance options, Element attributes, Instance methods, Instance events alphabetically --- README.md | 58 +++++++++++++++++++++++++++---------------------------- 1 file changed, 29 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index 30c96902..c42f5bf1 100644 --- a/README.md +++ b/README.md @@ -137,48 +137,48 @@ scroll.on('call', func => { | Option | Type | Default | Description | | ----------------------- | --------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `el` | `object` | `document` | Scroll container element. | -| `name` | `string` | `'scroll'` | Data attribute prefix (`data-scroll-xxxx`). | | -| `offset` | `array(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]` | -| `repeat` | `boolean` | `false` | Repeat in-view detection. | -| `smooth` | `boolean` | `false` | Smooth scrolling. | -| `initPosition` | `object` | `{ x: 0, y: 0 }` | ![Smooth only][smooth-only]
An `object` defining the initial scroll coordinates on a smooth instance. For example: `{ x: 0, y: 1000 }` | +| `class` | `string` | `is-inview` | Element in-view class. | | `direction` | `string` | `vertical` | ![Smooth only][smooth-only]
Scroll direction: `vertical` or `horizontal` | -| `lerp` | `number` | `0.1` | ![Smooth only][smooth-only]
Linear interpolation (lerp) intensity. Float between `0` and `1`.
This defines the "smoothness" intensity. The closer to `0`, the smoother. | +| `draggingClass` | `string` | `has-scroll-dragging` | Is dragging class. | +| `el` | `object` | `document` | Scroll container element. | +| `firefoxMultiplier` | `number` | `50` | ![Smooth only][smooth-only]
Boost scrolling speed of Firefox on Windows. | +| `gestureDirection` | `string` | `vertical` | ![Smooth only][smooth-only]
Defines which gesture direction(s) scrolls in your instance. You can use : | | `getDirection` | `boolean` | `false` | Add direction to scroll event. | | `getSpeed` | `boolean` | `false` | Add speed to scroll event. | -| `class` | `string` | `is-inview` | Element in-view class. | | `initClass` | `string` | `has-scroll-init` | Initialize class. | -| `scrollingClass` | `string` | `has-scroll-scrolling` | Is scrolling class. | -| `draggingClass` | `string` | `has-scroll-dragging` | Is dragging class. | -| `smoothClass` | `string` | `has-scroll-smooth` | Has smooth scrolling class. | -| `scrollbarContainer` | `object` | `false` | ![Smooth only][smooth-only]
Specifies the container element for the scrollbar to be appended in. If false, scrollbar will be appended to the body. | -| `scrollbarClass` | `string` | `c-scrollbar` | ![Smooth only][smooth-only]
Scrollbar element class. | +| `initPosition` | `object` | `{ x: 0, y: 0 }` | ![Smooth only][smooth-only]
An `object` defining the initial scroll coordinates on a smooth instance. For example: `{ x: 0, y: 1000 }` | +| `lerp` | `number` | `0.1` | ![Smooth only][smooth-only]
Linear interpolation (lerp) intensity. Float between `0` and `1`.
This defines the "smoothness" intensity. The closer to `0`, the smoother. | | `multiplier` | `number` | `1` | ![Smooth only][smooth-only]
Factor applied to the scroll delta, allowing to boost/reduce scrolling speed (regardless of the platform). | -| `firefoxMultiplier` | `number` | `50` | ![Smooth only][smooth-only]
Boost scrolling speed of Firefox on Windows. | -| `touchMultiplier` | `number` | `2` | ![Smooth only][smooth-only]
Multiply touch action to scroll faster than finger movement. | +| `name` | `string` | `'scroll'` | Data attribute prefix (`data-scroll-xxxx`). | | +| `offset` | `array(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]` | +| `reloadOnContextChange` | `boolean` | `false` | Allows to reload the page when switching between `desktop`, `tablet` and `smartphone` contexts. It can be useful if your page changes a lot between contexts and you want to reset everything. | +| `repeat` | `boolean` | `false` | Repeat in-view detection. | +| `resetNativeScroll` | `boolean` | `true` | Sets `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 to set it to `false` if you don't want to break History API's scroll restoration feature. | +| `scrollbarClass` | `string` | `c-scrollbar` | ![Smooth only][smooth-only]
Scrollbar element class. | +| `scrollbarContainer` | `object` | `false` | ![Smooth only][smooth-only]
Specifies the container element for the scrollbar to be appended in. If false, scrollbar will be appended to the body. | | `scrollFromAnywhere` | `boolean` | `false` | ![Smooth only][smooth-only]
By default locomotive-scroll listens for scroll events only on the scroll container (`el` option). With this option set to true, it listens on the whole document instead. | -| `gestureDirection` | `string` | `vertical` | ![Smooth only][smooth-only]
Defines which gesture direction(s) scrolls in your instance. You can use : | +| `scrollingClass` | `string` | `has-scroll-scrolling` | Is scrolling class. | +| `smooth` | `boolean` | `false` | Smooth scrolling. | +| `smoothClass` | `string` | `has-scroll-smooth` | Has smooth scrolling class. | | `tablet` & `smartphone` | `object` | | Object allowing to override some options for a particular context. You can specify: For `tablet` context you can also define `breakpoint` (_integer_, defaults to 1024) to set the max-width breakpoint for tablets. | -| `reloadOnContextChange` | `boolean` | `false` | Allows to reload the page when switching between `desktop`, `tablet` and `smartphone` contexts. It can be useful if your page changes a lot between contexts and you want to reset everything. | -| `resetNativeScroll` | `boolean` | `true` | Sets `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 to set it to `false` if you don't want to break History API's scroll restoration feature. | +| `touchMultiplier` | `number` | `2` | ![Smooth only][smooth-only]
Multiply touch action to scroll faster than finger movement. | ## Element attributes | Attribute | Values | Description | | ----------------------- | ------------------------ | ---------------------------------------------------------------------------------------- | | `data-scroll` | | Detect if in-view. | -| `data-scroll-id` | `string` | (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](https://github.com/locomotivemtl/locomotive-scroll/blob/master/dist/locomotive-scroll.css). | -| `data-scroll-section` | | Defines a scrollable section. Splitting your page into sections may improve performance. | +| `data-scroll-call` | `string` | Element in-view trigger call event. | | `data-scroll-class` | `string` | Element in-view class. | +| `data-scroll-container` | | Defines the scroll container. Required for [basic styling](https://github.com/locomotivemtl/locomotive-scroll/blob/master/dist/locomotive-scroll.css). | +| `data-scroll-delay` | `number` | ![Smooth only][smooth-only]
Element's parallax lerp delay. | +| `data-scroll-direction` | `string` | ![Smooth only][smooth-only]
Element's parallax direction. `vertical` or `horizontal` | +| `data-scroll-id` | `string` | (Optional) Useful if you want to scope your element and get the progress of your element in the viewport for example. | | `data-scroll-offset` | `string` | Element 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-repeat` | `boolean` | Element in-view detection repeat. | -| `data-scroll-call` | `string` | Element in-view trigger call event. | | `data-scroll-position` | `string` | `top`, `bottom`, `left` or `right`
Window position of in-view trigger. | +| `data-scroll-repeat` | `boolean` | Element in-view detection repeat. | +| `data-scroll-section` | | Defines a scrollable section. Splitting your page into sections may improve performance. | | `data-scroll-speed` | `number` | ![Smooth only][smooth-only]
Element parallax speed. A negative value will reverse the direction. | -| `data-scroll-delay` | `number` | ![Smooth only][smooth-only]
Element's parallax lerp delay. | -| `data-scroll-direction` | `string` | ![Smooth only][smooth-only]
Element's parallax direction. `vertical` or `horizontal` | | `data-scroll-sticky` | | ![Smooth only][smooth-only]
Sticky element. Starts and stops at `data-scroll-target` position. | | `data-scroll-target` | `string` | ![Smooth only][smooth-only]
Target element's in-view position. | @@ -186,20 +186,20 @@ scroll.on('call', func => { | Method | Description | Arguments | | -------------------------- | ------------------------------ | ------------------------------------------------------------------------------- | +| `destroy()` | Destroys the scroll events. | | | `init()` | Reinitializes the scroll. | | | `on(eventName, function)` | Listen [instance events] ⬇. | | -| `update()` | Updates all element positions. | | -| `destroy()` | Destroys the scroll events. | | +| `scrollTo(target, options)`| Scroll to a target. |
`target`: Defines where you want to scroll. Available values types are :
`options` (optional, _object_) : Settings object. Available values are: | | `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`
    ![Smooth only][smooth-only]
  • `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](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`*.
    ![Smooth only][smooth-only]
  • `disableLerp` (_boolean_) : Lerp effect won't be applied if set to `true`
    ![Smooth only][smooth-only]
| +| `update()` | Updates all element positions. | | ## Instance events | Event | Arguments | Description | | -------- | --------- | --------------------------------------------------------------------- | -| `scroll` | `obj` | Returns scroll instance (position, limit, speed, direction and current in-view elements). | | `call` | `func` | Trigger if in-view. Returns your `string` or `array` if contains `,`. | +| `scroll` | `obj` | Returns scroll instance (position, limit, speed, direction and current in-view elements). | ## Progressive playing animations example (like gsap) All `data-scroll` elements have a progress value.