{"_id":"@antonio-goncalves/hover-on-scroll","_rev":"1-8d5dce179bf3e9d6587d87b94554052a","name":"@antonio-goncalves/hover-on-scroll","dist-tags":{"latest":"1.0.0"},"versions":{"0.0.1":{"name":"@antonio-goncalves/hover-on-scroll","version":"0.0.1","description":"![Sample video](static/sample.gif)","source":"src/index.ts","main":"dist/main.js","module":"dist/module.js","types":"dist/types.d.ts","targets":{"main":{"source":"src/index.ts"},"module":{"source":"src/index.ts"},"types":{"source":"src/index.ts"}},"publishConfig":{"access":"public"},"scripts":{"prepublishOnly":"rm -rf dist && npm run build","watch":"parcel watch","build":"parcel build","start":"parcel dev/index.html","clean":"rm -rf dist node_modules .parcel-cache"},"author":{"name":"António Gonçalves"},"license":"MIT","devDependencies":{"@parcel/packager-ts":"^2.8.3","@parcel/transformer-typescript-types":"^2.8.3","@release-it/keep-a-changelog":"^3.1.0","@types/react":"^18.2.6","@types/react-dom":"^18.2.4","parcel":"^2.8.3","process":"^0.11.10","react":"^18.2.0","react-dom":"^18.2.0","release-it":"^15.10.3","typescript":"^5.0.4"},"gitHead":"726071b4606e03d0ef8579345e24d07c6dcdc4c5","_id":"@antonio-goncalves/hover-on-scroll@0.0.1","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-rjAX+RkVqHzeZ3IAcJefGoCbeYKFS5vlpBE0p/62wIkEkAYp+5sgkjrYeZieKaUPAEDP7HA9VX1zWoPUsHUiuw==","shasum":"d9ba266c8c61d8e20eacdc0be1ad61bbc46b32e7","tarball":"https://registry.npmjs.org/@antonio-goncalves/hover-on-scroll/-/hover-on-scroll-0.0.1.tgz","fileCount":11,"unpackedSize":43111,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAbCghIj4aCMY/UIEyEbk/wtHKhpdMAqBYPtx0isOxDwIgAhqUpcW8t7dFpE5zcboISV2OrW8Awv+niJVBPhY2HPA="}]},"_npmUser":{"name":"amr-goncalves","email":"contact@antonio-goncalves.com"},"directories":{},"maintainers":[{"name":"amr-goncalves","email":"contact@antonio-goncalves.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hover-on-scroll_0.0.1_1684962981530_0.7669106005022577"},"_hasShrinkwrap":false},"1.0.0":{"name":"@antonio-goncalves/hover-on-scroll","version":"1.0.0","description":"![Sample video](static/sample.gif)","source":"src/index.ts","main":"dist/main.js","module":"dist/module.js","types":"dist/types.d.ts","targets":{"main":{"source":"src/index.ts"},"module":{"source":"src/index.ts"},"types":{"source":"src/index.ts"}},"publishConfig":{"access":"public"},"scripts":{"prepublishOnly":"rm -rf dist && npm run build","watch":"parcel watch","build":"parcel build","start":"parcel dev/index.html","clean":"rm -rf dist node_modules .parcel-cache"},"author":{"name":"António Gonçalves"},"license":"MIT","devDependencies":{"@parcel/packager-ts":"^2.8.3","@parcel/transformer-typescript-types":"^2.8.3","@release-it/keep-a-changelog":"^3.1.0","@types/react":"^18.2.6","@types/react-dom":"^18.2.4","parcel":"^2.8.3","process":"^0.11.10","react":"^18.2.0","react-dom":"^18.2.0","release-it":"^15.10.3","typescript":"^5.0.4"},"gitHead":"25ceeb44c2a801d91f11fe536361a83a9f9a87d4","_id":"@antonio-goncalves/hover-on-scroll@1.0.0","_nodeVersion":"18.16.0","_npmVersion":"9.5.1","dist":{"integrity":"sha512-yFFBoaZdxg5HQ0eL/fCZxxdYHl727GyPeExQN6Cg/QxKVOrVF/1Z5sbaMOhijsPa+PJo1rCRqSrB2wOIFeICAg==","shasum":"06bb4e2943c3087cc115208f490e191444c823be","tarball":"https://registry.npmjs.org/@antonio-goncalves/hover-on-scroll/-/hover-on-scroll-1.0.0.tgz","fileCount":12,"unpackedSize":43321,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDddl6ZP7BJGUMPDrvyVQHMDYxgcn6gQQ+40zgUgCmYowIhAJgmLOHTBAnLUT8ePFQIEENP/45eJ+QRUuODVx3KG4Rr"}]},"_npmUser":{"name":"amr-goncalves","email":"contact@antonio-goncalves.com"},"directories":{},"maintainers":[{"name":"amr-goncalves","email":"contact@antonio-goncalves.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/hover-on-scroll_1.0.0_1684963999061_0.20315248552502485"},"_hasShrinkwrap":false}},"time":{"created":"2023-05-24T21:16:21.482Z","0.0.1":"2023-05-24T21:16:21.692Z","modified":"2023-05-24T21:33:19.345Z","1.0.0":"2023-05-24T21:33:19.238Z"},"maintainers":[{"name":"amr-goncalves","email":"contact@antonio-goncalves.com"}],"description":"![Sample video](static/sample.gif)","author":{"name":"António Gonçalves"},"license":"MIT","readme":"# HoverOnScroll\n\n![Sample video](static/sample.gif)\n\nHoverOnScroll is a JavaScript library that adds support to hover effects while scrolling the window or a container, it was developed to overcome the limitation of browsers to apply the css ```:hover``` effect during scroll\n\n## Sample\n\nThe sample available on the dev folder could be run following those steps\n\n```shell\nnpm install\nnpm run start\n```\n\n## Properties\n\n```typescript jsx\nimport HoverOnScroll from \"@antonio-goncalves/hover-on-scroll\";\n\nconst hoverOnScroll = new HoverOnScroll([elementToHover1,elementToHover2],options)\n\nfunction destroy(){\n    hoverOnScroll.destroy()\n}\n```\n### ElementToHover\nFirst parameter of HoverOnScroll constructor\n\n| Name         | Type   | is Optional | Description                                                               |\n|--------------|--------|-------------|---------------------------------------------------------------------------|\n| elementClass | string | no          | Class of the element where the \"hoverClass\" must be applied when hovering |\n| hoverClass   | string | no          | Class which will be applied to the element to enable the hover effect     |\n\n### Options\nSecond parameter of HoverOnScroll constructor, this parameter is optional\n\n\n| Name          | Type                 | is Optional | Description                                                                                                                       |\n|---------------|----------------------|-------------|-----------------------------------------------------------------------------------------------------------------------------------|\n| mouseOffset   | number               | yes         | Minimum Y value to be considered when listening the mouse position, this could be useful to allow the hover effect behind navbars |\n| initialMousePosition | {x:Number, y:Number} | yes         | Initial mouse position                                                                                                            |\n| scrollingElements | Element[] (DOM)      | yes         | Elements where the onScroll event will be attached, useful for containers with scroll                                             |\n| touchBehaviour | TouchBehaviour       | yes         | Options specific for touch devices                                                                                                |                                             \n### TouchBehaviour\n\nThose options are only relevant for touch devices.\n\n| Name          | Type            | is Optional | Description                                                                                                       |\n|---------------|-----------------|-------------|-------------------------------------------------------------------------------------------------------------------|\n| scrollWhenTouch   | boolean         | yes         | Set to true, to scroll to the element on touch                                                                    |\n| offsetWhenScroll | Number          | yes         | vertical offset for the behaviour described on the previous option, is useful to place the content below a navbar |\n     ","readmeFilename":"README.md"}