{"_id":"@badsmuggler/locomotive-scroll","_rev":"1-8bdf5fced8a76bd274ad738c59600213","name":"@badsmuggler/locomotive-scroll","dist-tags":{"latest":"3.3.12"},"versions":{"3.3.12":{"name":"@badsmuggler/locomotive-scroll","version":"3.3.12","description":"Detection of elements in viewport & smooth scrolling with parallax effects. Fork from https://locomotive.ca to fix annoying issue with sticky on resize","repository":{"type":"git","url":"git+https://github.com/badsmuggler/locomotive-scroll.git"},"author":{"name":"Locomotive","email":"info@locomotive.ca","url":"https://locomotive.ca"},"license":"MIT","main":"./dist/locomotive-scroll.js","module":"./dist/locomotive-scroll.esm.js","devDependencies":{"@modularbp/gulp":"^1.0.5","@modularbp/gulp-build":"^1.0.1","@modularbp/gulp-error":"^1.0.3","@modularbp/gulp-js":"^1.0.8","@modularbp/gulp-notify":"^1.0.3","@modularbp/gulp-sass":"^1.0.7","@modularbp/gulp-serve":"^1.0.5","@modularbp/gulp-svg":"^1.0.5","@modularbp/gulp-watch":"^1.0.5","gulp-header":"^2.0.9","mbp":"^1.1.3","merge-stream":"^2.0.0","normalize.css":"^8.0.1"},"dependencies":{"gulp-uglify":"^3.0.2","virtual-scroll":"^1.5.2"},"gitHead":"90dfe25e229d0eccd7ce220ddba73be25678824c","bugs":{"url":"https://github.com/badsmuggler/locomotive-scroll/issues"},"homepage":"https://github.com/badsmuggler/locomotive-scroll#readme","_id":"@badsmuggler/locomotive-scroll@3.3.12","_nodeVersion":"13.2.0","_npmVersion":"6.13.1","dist":{"integrity":"sha512-7QD9hsXPYpwzP8f8pcnOcsUEZy0ZgAmw0q9wi0IhJ0oGZQDFxJ8jJS16zxoRFSixMJf5vT+yyOhd9gm2xqYaQw==","shasum":"e26914d50f35c7d9a0ec39147fea76c83cb6951f","tarball":"https://registry.npmjs.org/@badsmuggler/locomotive-scroll/-/locomotive-scroll-3.3.12.tgz","fileCount":27,"unpackedSize":211525,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekCBBCRA9TVsSAnZWagAAUhwQAIrPQ5gEvVOlq37myfqc\n48ehiDnyPvixL6Zpgl7kGVrezO0rkpvwRJ67lCi3vJWRz4IlsvRbi+Hl3Kyn\nY8m4jop5EZPcTuMr0cDGD+KSe3C3dwCaUrpMBBip2R/GDeDTje4KFka/3xmV\nZG3RLNK2I37XhZz5ogpFqRfgtIm4PQy2z3cKVaIuz73bCdIViv9LwEgkr56d\nOO6Wc5Dor8WcGYtMzec4N2WWO8LGIzBhyCjJU5hpQGosOoOK44aCo7bdM6Bm\nU4QzLXXn/y7sqDQLdQG8voNnejBmVDUYR9CmYUerwp9eLpIbbIQt+vMB2ekd\nF7TpcyQwcBuFYk1y2+2NR1d1WnbkoCWa0dInglD2LqQy0Xe9PZ2LpJ3eTJ7t\n8jPSbEUOl5FEx0G+3oYSMRUlzJF/ZXxrfGBot3z0DEVeiEtit/OHtt4b9vnk\nKTLU/TiIqEpdhp1XoyPn9PTygY+3OB4IGIaSqN63TBO4BzXfgD8mIFpVWEyl\nmiE3kurRIyb9ou8tZFCZe0rc+5muI2nwc3865fohZrFSwDMplJ4iaPEb/KIU\nRXQnOj/hG9Vf9QBM2rDVvrlSlQqZU9MGaNYV04efbD8bui2QpC904FBnxgKr\njQASqF9gc+IkH49mClSSVjMnrswQke2vxz0HP981sgJBXlS8bCar8oE8Ib6A\nSh79\r\n=83jw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA/F43xj/mbyL7mioUSMkuAkQ2sLrV3z+L+v9p5mEuPzAiAUviOHb/KBC/sX/jyo3lKG5L+muD7bUCJpSYrQQU++yg=="}]},"maintainers":[{"name":"badsmuggler","email":"pierre.lovenfosse@badsmuggler.com"}],"_npmUser":{"name":"badsmuggler","email":"pierre.lovenfosse@badsmuggler.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/locomotive-scroll_3.3.12_1586503744581_0.9755751204812515"},"_hasShrinkwrap":false}},"time":{"created":"2020-04-10T07:29:04.535Z","3.3.12":"2020-04-10T07:29:04.717Z","modified":"2022-04-04T17:30:02.495Z"},"maintainers":[{"name":"badsmuggler","email":"pierre.lovenfosse@badsmuggler.com"}],"description":"Detection of elements in viewport & smooth scrolling with parallax effects. Fork from https://locomotive.ca to fix annoying issue with sticky on resize","homepage":"https://github.com/badsmuggler/locomotive-scroll#readme","repository":{"type":"git","url":"git+https://github.com/badsmuggler/locomotive-scroll.git"},"author":{"name":"Locomotive","email":"info@locomotive.ca","url":"https://locomotive.ca"},"bugs":{"url":"https://github.com/badsmuggler/locomotive-scroll/issues"},"license":"MIT","readme":"<p align=\"center\">\n    <a href=\"https://github.com/locomotivemtl/locomotive-scroll\">\n        <img src=\"https://user-images.githubusercontent.com/4596862/58807621-67aeec00-85e6-11e9-8e3a-3fe4123ee76c.png\" height=\"140\">\n    </a>\n</p>\n<h1 align=\"center\">Locomotive Scroll</h1>\n<p align=\"center\">Detection of elements in viewport & smooth scrolling with parallax effects.</p>\n\n## Installation\n\n```sh\nnpm install locomotive-scroll\n```\n\n## Usage\n\n### Basic\nWith simple detection.\n\n#### HTML\n```html\n<h1 data-scroll>Hey</h1>\n<p data-scroll>👋</p>\n```\n\n#### CSS\nAdd the base styles to your CSS file.\n\n[`locomotive-scroll.css`](https://github.com/locomotivemtl/locomotive-scroll/blob/master/dist/locomotive-scroll.css)\n\n#### JS\n\n##### With a bundler\n```js\nimport LocomotiveScroll from 'locomotive-scroll';\n\nconst scroll = new LocomotiveScroll();\n```\n\n##### Or without\n```js\n<script src=\"locomotive-scroll.min.js\"></script>\n<script>\n    (function () {\n        var scroll = new LocomotiveScroll();\n    })();\n</script>\n```\n_Get the [JS file](https://github.com/locomotivemtl/locomotive-scroll/blob/master/dist/locomotive-scroll.min.js)._\n\n### Smooth\nWith smooth scrolling and parallax.\n\n```html\n<div data-scroll-container>\n    <div data-scroll-section>\n        <h1 data-scroll>Hey</h1>\n        <p data-scroll>👋</p>\n    </div>\n    <div data-scroll-section>\n        <h2 data-scroll data-scroll-speed=\"1\">What's up?</h2>\n        <p data-scroll data-scroll-speed=\"2\">😬</p>\n    </div>\n</div>\n```\n\n```js\nimport LocomotiveScroll from 'locomotive-scroll';\n\nconst scroll = new LocomotiveScroll({\n    el: document.querySelector('[data-scroll-container]'),\n    smooth: true\n});\n```\n\n_Note: scroll-sections are optional but recommended to improve performance, particularly in long pages._\n\n### Advanced\nMake it do what you want.\n\n#### With methods\n```html\n<section id=\"js-target\">Come here please.</section>\n```\n\n```js\nimport LocomotiveScroll from 'locomotive-scroll';\n\nconst scroll = new LocomotiveScroll();\nconst target = document.querySelector('#js-target');\n\nscroll.scrollTo(target);\n```\n\n#### With events\n\n```html\n<!-- Using modularJS -->\n<div data-scroll data-scroll-call=\"function, module\">Trigger</div>\n<!-- Using jQuery events -->\n<div data-scroll data-scroll-call=\"EVENT_NAME\">Trigger</div>\n<!-- Or do it your own way 😎 -->\n<div data-scroll data-scroll-call=\"{y,o,l,o}\">Trigger</div>\n```\n\n```js\nimport LocomotiveScroll from 'locomotive-scroll';\n\nconst scroll = new LocomotiveScroll();\n\nscroll.on('call', func => {\n    // Using modularJS\n    this.call(...func);\n    // Using jQuery events\n    $(document).trigger(func);\n    // Or do it your own way 😎\n});\n```\n\n## Instance options\n\n| Option              | Type      | Default                | Description                                                                           |\n| ------------------- | --------- | ---------------------- | ------------------------------------------------------------------------------------- |\n| `el`                | `object`  | `document`             | Scroll container element.                                                             |\n| `name`              | `string`  | `'scroll'`             | Data attribute prefix (`data-scroll-xxxx`).                                           |\n| `offset`            | `array(2)`| `[0,0]`                | Global in-view trigger offset : `[bottom,top]`<br>Use a string with `%` to use a percentage of the viewport height.<br>Use a numeric value for absolute pixels unit.<br>E.g. `[\"30%\",0]`, `[100,0]`, `[\"30%\", 100]`  |\n| `repeat`            | `boolean` | `false`                | Repeat in-view detection.                                                             |\n| `smooth`            | `boolean` | `false`                | Smooth scrolling.                                                                     |\n| `smoothMobile`      | `boolean` | `false`                | Smooth scrolling on iOS and Android devices.                                          |\n| `direction`         | `string`  | `vertical`             | Scroll direction.                                                                     |\n| `inertia`           | `number`  | `1`                    | Lerp intensity.                                                                       |\n| `getDirection`      | `boolean` | `false`                | Add direction to scroll event.                                                        |\n| `getSpeed`          | `boolean` | `false`                | Add speed to scroll event.                                                            |\n| `class`             | `string`  | `is-inview`            | Element in-view class.                                                                |\n| `initClass`         | `string`  | `has-scroll-init`      | Initialize class.                                                                     |\n| `scrollingClass`    | `string`  | `has-scroll-scrolling` | Is scrolling class.                                                                   |\n| `draggingClass`     | `string`  | `has-scroll-dragging`  | Is dragging class.                                                                    |\n| `smoothClass`       | `string`  | `has-scroll-smooth`    | Has smooth scrolling class.                                                           |\n| `scrollbarClass`    | `string`  | `c-scrollbar`          | Scrollbar element class.                                                              |\n| `firefoxMultiplier` | `number`  | `50`                   | Boost scrolling speed of Firefox on Windows.                                          |\n| `touchMultiplier`   | `number`  | `2`                    | Mutiply touch action to scroll faster than finger movement.                           |\n\n## Element attributes\n\n| Attribute               | Values                   | Description                                                                              |\n| ----------------------- | ------------------------ | ---------------------------------------------------------------------------------------- |\n| `data-scroll`           |                          | Detect if in-view.                                                                       |\n| `data-scroll-container` |                          | Defines the scroll container. Required for [basic styling](https://github.com/locomotivemtl/locomotive-scroll/blob/master/dist/locomotive-scroll.css).                                                                                      |\n| `data-scroll-section`   |                          | Defines a scrollable section. Splitting your page into sections may improve performance. |\n| `data-scroll-class`     | `string`                 | Element in-view class.                                                                   |\n| `data-scroll-offset`    | `string`                 | Element in-view trigger offset : `bottom,top`<br>First value is `bottom` offset, second (optional) is `top` offset.<br> Percent is relative to viewport height, otherwise it's absolute pixels.<br>E.g. `\"10\"`, `\"100,50%\"`, `\"25%, 15%\"`  |\n| `data-scroll-repeat`    | `true`, `false`          | Element in-view detection repeat.                                                        |\n| `data-scroll-call`      | `string`                 | Element in-view trigger call event.                                                      |\n| `data-scroll-speed`     | `number`                 | Element parallax speed. A negative value will reverse the direction.                     |\n| `data-scroll-target`    | `string`                 | Target element's in-view position.                                                       |\n| `data-scroll-position`  | `top`, `bottom`          | Window position of in-view trigger.                                                      |\n| `data-scroll-direction` | `vertical`, `horizontal` | Element's parallax direction.                                                            |\n| `data-scroll-delay`     | `number`                 | Element's parallax lerp delay.                                                           |\n| `data-scroll-sticky`    |                          | Sticky element. Starts and stops at `data-scroll-target` position.                       |\n\n## Instance methods\n\n| Method                     | Description                    | Arguments                                                                       |\n| -------------------------- | ------------------------------ | ------------------------------------------------------------------------------- |\n| `init()`                   | Reinitializes the scroll.      |                                                                                 |\n| `on(eventName, function)`  | Listen [instance events] ⬇.    |                                                                                 |\n| `update()`                 | Updates all element positions. |                                                                                 |\n| `destroy()`                | Destroys the scroll events.    |                                                                                 |\n| `start()`                  | Restarts the scroll events.    |                                                                                 |\n| `stop()`                   | Stops the scroll events.       |                                                                                 |\n| `scrollTo(target, offset)` | Scroll to an element.          | `target`: Defines where you want to scroll. Available values types are :<ul><li>`node` : a dom element</li><li>`string` : you can type your own selector, or use values `\"top\"` and `\"bottom\"` to reach scroll boundaries</li><li>`int` : An absolute scroll coordinate in pixels</li></ul>`offset` (optionnal) : A `number` that defines an offset from your target. E.g. `-100` if you want to scroll 100 pixels above your target |\n\n## Instance events\n\n| Event    | Arguments | Description                                                           |\n| -------- | --------- | --------------------------------------------------------------------- |\n| `scroll` | `obj`     | Returns scroll instance (position, limit, speed, direction).          |\n| `call`   | `func`    | Trigger if in-view. Returns your `string` or `array` if contains `,`. |\n\n## Dependencies\n\n| Name             | Description                                                       |\n| ---------------- | ----------------------------------------------------------------- |\n| [Virtual Scroll] | Custom scroll event with inertia/momentum.                        |\n| [modularScroll]  | Elements in viewport detection. Forked from it, not a dependency. |\n\n[instance events]: #instance-events\n[Virtual Scroll]: https://github.com/ayamflow/virtual-scroll\n[modularScroll]: https://github.com/modularorg/modularscroll\n\n## Browser support\n\nWorks on most modern browsers. Chrome, Firefox, Safari, Edge...\n\nTo get IE 11 support, you need polyfills.\nYou can use your own or include these before our script.\n\n```html\n<script nomodule src=\"https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.6.0/polyfill.min.js\" crossorigin=\"anonymous\"></script>\n<script nomodule src=\"https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CElement.prototype.append%2CNodeList.prototype.forEach%2CCustomEvent%2Csmoothscroll\" crossorigin=\"anonymous\"></script>\n```\n\n## Related\n\n- [Locomotive Boilerplate 🚂](https://github.com/locomotivemtl/locomotive-boilerplate)\n","readmeFilename":"README.md"}