{"_id":"@abhilashsahoo/parallax","_rev":"2-8e77d9cbd753e94d79f34a548eb2cd4d","name":"@abhilashsahoo/parallax","dist-tags":{"latest":"2.0.1"},"versions":{"2.0.0":{"name":"@abhilashsahoo/parallax","version":"2.0.0","keywords":["parallax","scroll","jquery","jquery-plugin"],"author":{"name":"Abhilash Sahoo"},"license":"MIT","_id":"@abhilashsahoo/parallax@2.0.0","maintainers":[{"name":"abhilashsahoo","email":"info@infyways.com"}],"homepage":"https://github.com/abhilashsahoo/parallax#readme","bugs":{"url":"https://github.com/abhilashsahoo/parallax/issues"},"dist":{"shasum":"14d2310f259dae35fff9c3a7c4f45401e368c240","tarball":"https://registry.npmjs.org/@abhilashsahoo/parallax/-/parallax-2.0.0.tgz","fileCount":10,"integrity":"sha512-GVzYh/X5uvF5IPS0Zu5PNM2P5UjxoFbNITrW/24JWa1l8OWjRkn7ogO8mP3ZiVmDbDFInY5lgMcIjKRnt0uOiw==","signatures":[{"sig":"MEUCIQCW1pajCB6nzO80EE2mxSh4G0MflolE4QzlsBXONKrAnAIgP6tBuzZfXVfZZ23CCM6S9c69uWaSmbzeGJ3X6leZrz8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":3088713},"main":"parallax.js","gitHead":"eacc6a23833f4c63b27be9ff21aef923059f8bfc","_npmUser":{"name":"abhilashsahoo","email":"info@infyways.com"},"repository":{"url":"git+https://github.com/abhilashsahoo/parallax.git","type":"git"},"_npmVersion":"10.9.2","description":"Simple parallax scrolling effect — jQuery plugin","directories":{},"_nodeVersion":"22.16.0","_hasShrinkwrap":false,"peerDependencies":{"jquery":">=1.7"},"_npmOperationalInternal":{"tmp":"tmp/parallax_2.0.0_1773318046085_0.05702196458584363","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"@abhilashsahoo/parallax","version":"2.0.1","description":"Parallax scrolling — vanilla JS, works with Node, React, jQuery, or any JS","main":"parallax.js","repository":{"type":"git","url":"git+https://github.com/abhilashsahoo/parallax.git"},"keywords":["parallax","scroll","jquery","jquery-plugin","react","vanilla","browser"],"author":{"name":"Abhilash Sahoo"},"license":"MIT","bugs":{"url":"https://github.com/abhilashsahoo/parallax/issues"},"homepage":"https://github.com/abhilashsahoo/parallax#readme","peerDependencies":{"jquery":">=1.7"},"_id":"@abhilashsahoo/parallax@2.0.1","gitHead":"2e0018a712515f14f5eb2b304a89058aa750f4a5","_nodeVersion":"22.16.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-rGmOJu0sERVZJwS56Ad+vjB0rkIypntorfGrp1DjOTluU/fim2Cs14s3FAoYbGnUtjO8dOvm6xuZ7Bh8y5K3iA==","shasum":"0c8c76c844adfe3c0d808cfc9622aa9b682a5f40","tarball":"https://registry.npmjs.org/@abhilashsahoo/parallax/-/parallax-2.0.1.tgz","fileCount":10,"unpackedSize":3093373,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIB3Jxvn8vUzdbG/EYNEH2ETwl+kxLnKp9P5ina/EnDP8AiEA0RQdsTpMZwk5tK8HQ/58zK7/6A9uoVO6bFsUSxxJ4q8="}]},"_npmUser":{"name":"abhilashsahoo","email":"info@infyways.com"},"directories":{},"maintainers":[{"name":"abhilashsahoo","email":"info@infyways.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/parallax_2.0.1_1773318483259_0.4041266864663644"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-12T12:20:45.954Z","modified":"2026-03-12T12:28:03.615Z","2.0.0":"2026-03-12T12:20:46.346Z","2.0.1":"2026-03-12T12:28:03.508Z"},"bugs":{"url":"https://github.com/abhilashsahoo/parallax/issues"},"author":{"name":"Abhilash Sahoo"},"license":"MIT","homepage":"https://github.com/abhilashsahoo/parallax#readme","keywords":["parallax","scroll","jquery","jquery-plugin","react","vanilla","browser"],"repository":{"type":"git","url":"git+https://github.com/abhilashsahoo/parallax.git"},"description":"Parallax scrolling — vanilla JS, works with Node, React, jQuery, or any JS","maintainers":[{"name":"abhilashsahoo","email":"info@infyways.com"}],"readme":"# Parallax.js\n\nParallax scrolling effect — works with **vanilla JS**, **Node**, **React**, **jQuery**, or any JS environment.\n\n**Author:** Abhilash Sahoo  \n**Repository:** [github.com/abhilashsahoo/parallax](https://github.com/abhilashsahoo/parallax)\n\n## Install\n\n```bash\nnpm install @abhilashsahoo/parallax\n```\n\njQuery is **optional**. Install it only if you want to use the jQuery API (`$.fn.parallax`).\n\n---\n\n## Usage\n\n### Vanilla JS / Any framework\n\nPass a DOM element and options. No jQuery required.\n\n```javascript\nimport { init, destroy } from '@abhilashsahoo/parallax';\n\nconst el = document.querySelector('.parallax-window');\ninit(el, { imageSrc: '/path/to/image.jpg', speed: 0.3 });\n\n// Later: destroy(el);\n```\n\n### React\n\nUse a ref and `useEffect`:\n\n```jsx\nimport { useRef, useEffect } from 'react';\nimport { init, destroy } from '@abhilashsahoo/parallax';\n\nfunction ParallaxSection({ imageSrc, speed = 0.2 }) {\n  const ref = useRef(null);\n\n  useEffect(() => {\n    if (!ref.current) return;\n    init(ref.current, { imageSrc, speed });\n    return () => destroy(ref.current);\n  }, [imageSrc, speed]);\n\n  return <div ref={ref} className=\"parallax-window\" style={{ minHeight: '100vh', background: 'transparent' }} />;\n}\n```\n\n### jQuery\n\nIf jQuery is present, the plugin is attached automatically:\n\n```javascript\n$('.parallax-window').parallax({ imageSrc: '/path/to/image.jpg' });\n```\n\n### Browser script tag (no build)\n\nInclude the script; jQuery is optional. Elements with `data-parallax=\"scroll\"` are initialised automatically.\n\n```html\n<script src=\"parallax.js\"></script>\n<!-- Optional: <script src=\"https://code.jquery.com/jquery-3.7.1.min.js\"></script> -->\n\n<div class=\"parallax-window\" data-parallax=\"scroll\" data-image-src=\"/path/to/image.jpg\"></div>\n```\n\n---\n\n## Styling\n\nParallax elements must be transparent so the effect is visible. Give the container a minimum height:\n\n```css\n.parallax-window {\n  min-height: 400px;\n  background: transparent;\n}\n```\n\n---\n\n## Options\n\n| Option          | Type    | Default   | Description |\n|-----------------|---------|-----------|-------------|\n| imageSrc        | string  | null      | Path to the parallax image. |\n| naturalWidth    | number  | auto      | Image width (optional). |\n| naturalHeight   | number  | auto      | Image height (optional). |\n| position        | string  | center center | Like CSS background-position. |\n| positionX       | string  | center    | Horizontal position. |\n| positionY       | string  | center    | Vertical position. |\n| speed           | float   | 0.2       | Parallax speed (0 = fixed, 1 = same as scroll). |\n| zIndex          | number  | -100      | z-index of the mirror element. |\n| bleed           | number  | 0         | Extra pixels to hide scroll jitter. |\n| iosFix          | boolean | true      | Static background on iOS. |\n| androidFix      | boolean | true      | Static background on Android. |\n| overScrollFix   | boolean | false     | Fix over-scroll in Safari. |\n| mirrorContainer | string  | 'body'    | Selector for the mirror container. |\n\nData attributes: `data-image-src`, `data-speed`, `data-z-index`, etc. (camelCase → kebab-case).\n\n---\n\n## License\n\nMIT © Abhilash Sahoo\n","readmeFilename":"README.md"}