{"_id":"@baianat/flux.js","_rev":"5-c6d2702dbd585d47df38c212a3729ffa","name":"@baianat/flux.js","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@baianat/flux.js","version":"0.0.1","author":{"name":"Abdelrahman Ismail","email":"abdelrahman3d@gmail.com"},"main":"dist/flux.js","module":"dist/flux.esm.js","license":"MIT","keywords":["scroll","parallax","flux"],"maintainers":[{"name":"abdelrahman3d","email":"Abdelrahman3d@gmail.com"},{"name":"logaretm","email":"logaretm1@gmail.com"}],"scripts":{"lint":"eslint ./src --fix","build":"MODE=production node build/scripts","dev":"MODE=dev node build/watcher"},"devDependencies":{"autoprefixer-stylus":"^0.14.0","babel-core":"^6.26.0","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-async-to-generator":"^6.24.1","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","browser-sync":"^2.23.6","chalk":"^2.3.2","eslint":"^4.19.1","eslint-config-standard":"^11.0.0","eslint-plugin-import":"^2.10.0","eslint-plugin-node":"^6.0.1","eslint-plugin-promise":"^3.7.0","eslint-plugin-standard":"^3.0.1","filesize":"^3.6.1","fs":"0.0.1-security","gzip-size":"^4.1.0","rollup":"^0.57.1","rollup-plugin-babel":"^3.0.3","rollup-plugin-json":"^2.3.0","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-replace":"^2.0.0","stylus":"^0.54.5","uglify-js":"^3.3.21","uglifycss":"0.0.29"},"dependencies":{},"gitHead":"cce1f496a07275138a7d587764b7bb780a08e3f9","description":"Flux.js is a JavaScript package that enables parallax scrolling effect on selected elements. With optimizations to Reduce **Jank**.","_id":"@baianat/flux.js@0.0.1","_npmVersion":"6.0.0","_nodeVersion":"9.8.0","_npmUser":{"name":"abdelrahman3d","email":"Abdelrahman3d@gmail.com"},"dist":{"integrity":"sha512-rQtoktxLTJi5gtvb8oshy/nYegoGluiSBQnBjlae0/dF4vFMF3KwY+aQSZgkxoO7DvI2hTKX+4dCmdM2yzZZ/A==","shasum":"ccd07d0a69c5a9df39e30ae4566a91c3feb10e02","tarball":"https://registry.npmjs.org/@baianat/flux.js/-/flux.js-0.0.1.tgz","fileCount":15,"unpackedSize":159023,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa6H+cCRA9TVsSAnZWagAAfasQAIWJ4kOkxtWLGv+Y79MM\nZKZrXW6O3Ykb2bRCzEzEE4qT69JECDuIKGcOijEwXQ8lk1di++YzKOiKoW4h\nDwD9JaOpKQtthVHHuxQhcxMganIk+kAsm60n78rK1kyGOHSQ113aFuyli/z2\nLxUGhAHvnOh1C3hZ3Gpn6x3ol128YYbzISv/0SMIUSQ7n072FoqW76pDnRrb\nMUKIKl54dk7DjlPckz4SO6YihpMO6FBSFaO27Rp0jIDDpXwEZjLQZvMXvyos\nP7Ajz4+ce9OyOFFlxVmT/jfYf+R8jDrxKAd2SEAtZFQl7sUjw5atfkGX/sof\n4kTvOcPT2DxJ0qqFXW08CAzYmop5lozKalUIuuFAGsqqXyEpmUU14rXaKc0Y\npVMJeQ0z4G5SbPAXGmZztG8PYecoFlWaFsw743gykrke5oGsHd00bePBFQ16\n1D8Fq/X/ixqy4rtqyS0kc4ZArzAoveGYQ/weikX3y93IdoCoBCp6br9uhAB3\n28FVtEwBa9bX9cgiUIiz6s4gFgHI56DnLMS5PSme30zd7Ws0eda2WUxsfBDa\nLt65gch4DuxteJ0iE2EPcG9oft26EnKULIz4aK8ddjexLF7ew+sWNYX+VCWU\nUPKcLg3n9YrXmh15+gJUj15yLw7ZhnGsjzrQJm+dVFKO+IG/TkZ6kIoGL//g\nKSwn\r\n=wCEj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPgJAkPIs/Rch2LCBr/bhoVpnwdt5tBzpHLSMLKVjadgIhANPR2h4aOy6yZzDmDYQtcgvXWzFmKpCmqnbxZh0AfHfP"}]},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/flux.js_0.0.1_1525186459462_0.9015094138368407"},"_hasShrinkwrap":false},"0.0.2":{"name":"@baianat/flux.js","version":"0.0.2","author":{"name":"Abdelrahman Ismail","email":"abdelrahman3d@gmail.com"},"main":"dist/flux.js","module":"dist/flux.esm.js","license":"MIT","keywords":["scroll","parallax","flux"],"maintainers":[{"name":"abdelrahman3d","email":"Abdelrahman3d@gmail.com"},{"name":"logaretm","email":"logaretm1@gmail.com"}],"scripts":{"lint":"eslint ./src --fix","build":"MODE=production node build/scripts","dev":"MODE=dev node build/watcher"},"devDependencies":{"autoprefixer-stylus":"^0.14.0","babel-core":"^6.26.0","babel-plugin-external-helpers":"^6.22.0","babel-plugin-transform-async-to-generator":"^6.24.1","babel-plugin-transform-class-properties":"^6.24.1","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-env":"^1.6.1","browser-sync":"^2.23.6","chalk":"^2.3.2","eslint":"^4.19.1","eslint-config-standard":"^11.0.0","eslint-plugin-import":"^2.10.0","eslint-plugin-node":"^6.0.1","eslint-plugin-promise":"^3.7.0","eslint-plugin-standard":"^3.0.1","filesize":"^3.6.1","fs":"0.0.1-security","gzip-size":"^4.1.0","rollup":"^0.57.1","rollup-plugin-babel":"^3.0.3","rollup-plugin-json":"^2.3.0","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-replace":"^2.0.0","stylus":"^0.54.5","uglify-js":"^3.3.21","uglifycss":"0.0.29"},"dependencies":{},"gitHead":"7730cd8d7b178ad647b814c3a31d8aa33ba9a90c","description":"Flux.js is a JavaScript package that enables parallax scrolling effect on selected elements. With optimizations to Reduce **Jank**.","_id":"@baianat/flux.js@0.0.2","_npmVersion":"6.0.0","_nodeVersion":"9.8.0","_npmUser":{"name":"abdelrahman3d","email":"Abdelrahman3d@gmail.com"},"dist":{"integrity":"sha512-8yqM71hRNuyLhgkojI/sDDsiazdPAr75mBNAfFEtRMHQm+02uGGE0HlexFTQ1/7JCA/9rb9g24tVg35nebGpGQ==","shasum":"db7cacaf2d0f538a77b1e3eda689c46cab757af3","tarball":"https://registry.npmjs.org/@baianat/flux.js/-/flux.js-0.0.2.tgz","fileCount":6,"unpackedSize":31533,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa6IdgCRA9TVsSAnZWagAAuFYP/2a3e4O3QIGCMiw9G8xt\nCiaJiH1vjVZllMeRc5bnBu6tgLi8qBHsaG7RyoSOcLGMjnarTZFHEKCaHGIm\nZSFngLpVtHhV3V+HFoi3jN7JBDeUHpNy5TQi7uxalylRQBYWwr5SyyT0j0Lk\nK0RUXStfszSPgA/Y2IMpTqh6WHwww/flg5IBJkx8dgMlgUbeVaJLtJPhDXLA\nb9HaoVvlQBdz2rPuXNWnhKYSC3D/HDHC5vG5yoXns/SNOESSvrXCz7gn2B/N\nDpIBInOBiDLDc4c3tlCBpQAi1HpjaQt/7VJDpM14TRE75O/xsulpiQ/OYu2s\nUilzupYGuckJGRrWjKOiXV6Ft8X3uxc3xacue7pUkGxgdsZvF6BkXKcff4Dy\n9D7ZW9cT6apnEjh2asCVwF9QgGmLIh/xL3AW9uUinF+cppsR2zyvb5Cun35r\nfV8t4tBaNND60dOMjgbPkoo4DjRPMg4aXh98cTKto0Rw4dd4RhxcnBPGkAte\nS4rZgacsBMXnf6YNIKDLoL44QfDWDQAdflsjqi09D3W6mqMQKJW+yPscy5Pv\ndCjNcE3cyzToe1rt6KlY0j/HLSWbbxtxftqxqV3aJTzFwjFi52vWJtZVaW48\npz7NgqJmptlXUdwxiKDkoFiJHx/HP71kzzWso8Z/LgOfy941nosrda/gNYFi\nBAXQ\r\n=G6yt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA9FRn1vCxmgD3j+Ve7K0XHxLbN2rKlJOFkvNTyz+vxFAiEAr3EpQwDLmpF2rRxTAwvGtiOqYwEAieNkmXaoAEWWKr4="}]},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/flux.js_0.0.2_1525188447493_0.2477205791334125"},"_hasShrinkwrap":false}},"time":{"created":"2018-05-01T14:54:19.412Z","0.0.1":"2018-05-01T14:54:19.549Z","modified":"2022-04-04T17:30:48.862Z","0.0.2":"2018-05-01T15:27:27.584Z"},"maintainers":[{"email":"mobher@gmail.com","name":"baianaters"}],"description":"Flux.js is a JavaScript package that enables parallax scrolling effect on selected elements. With optimizations to Reduce **Jank**.","keywords":["scroll","parallax","flux"],"author":{"name":"Abdelrahman Ismail","email":"abdelrahman3d@gmail.com"},"license":"MIT","readme":"# Flux.js\n\nFlux.js is a JavaScript package that enables parallax scrolling effect on selected elements.\nWith optimizations to Reduce **Jank**.\n\n## Supported Effects\n\nThe following are supported effects\n\n* Translate (Y, X)\n* Rotate\n* Scale\n* Opacity\n* Add custom class\n\n## Examples\n\n[Example](https://baianat.github.io/flux.js/)\n\n## Getting Started\n\n### Install\n\nFirst step is to install it using yarn or npm\n\n```bash\nnpm install @baianat/flux.js\n\n# or use yarn\nyarn add @baianat/flux.js\n```\n\n### Include necessary files\n\n``` html\n<body>\n  ...\n  <script type=\"text/javascript\" src=\"dist/js/flux.js\"></script>\n</body>\n```\n\n### Usage\n\nYou create new `Flux` object and pass array of elements, that you want to add effect to it.\n\n``` javascript\n  const fluxer = new Flux(\n    [{\n      // Item 1 option\n    }, {\n      // Item 2 option\n    }],\n\n    // settings\n    {\n      // breakpoint disables transformations, opacity and class toggling.\n      breakpoint: 500, // defaults 0\n      // if animation ends when the element gets out out of viewport\n      outOfViewport: false, // defaults true\n      // viewport ratio when animation should finish value from [0.1, 1]\n      finishRatio: 1\n    }\n  );\n```\n\n### Items Options\n\n```js\n{\n  // Element css selector or DOM element\n  element: '#square1',\n  // viewport ratio when animation should finish value from [0.1, 1]\n  finishRatio: 1\n  // Translate object values\n  translate: {\n    // translate unit, it can be 'px' or '%', defaults is 'px'\n    unit: '%'\n    // Y offsets, first value is the starting position, second is the ending position in px\n    y: [-200, 200],\n    // X offsets, first value is the starting position, second is the ending position in px\n    x: [0, 10]\n  },\n  // Rotate values, first value is the starting degree, second is the ending degree\n  // Accepts value between -360 : 360.\n  rotate: [-45, 45],\n  // Scale values, first value is the starting scale, second is the ending scale\n  // Accepts fraction values.\n  scale: [0.5, 1.4],\n  // Opacity values, first value is the starting opacity, second is the ending opacity\n  // Accepts value between 0 : 1, fractions are allowed\n  opacity: [0, 1],\n  // A class to be added when the element is in the viewport\n  // It you want to toggle the class state when element in/out of the viewport\n  // You can pass an object {'is-active': 'toggle'}\n  class: 'is-active',\n  // To disable transform and opacity changes.\n  // It usually uses when working with class.\n  omit: true (deprecated 👎)\n}\n```\n\n## Methods\n\n### flux.update([force])\n\n* `force` \\<boolean\\>\n\nUpdates elements in viewport position according to the current scroll, using `force` will update all elements event those that are not visible in the viewport\n\n### flux.reload()\n\nRecalculates all elements bounding rectangle and regenerates its data then force update it.\n\n## Browser Support\n\nThis package is using [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to check if the element in the viewport, since it's not [supported](https://caniuse.com/#search=IntersectionObserver) in all browsers you will need to add a [polyfill](https://github.com/w3c/IntersectionObserver/tree/master/polyfill) to use it.\n","readmeFilename":"README.md"}