{"id":17497442,"url":"https://github.com/moox/parallaxify","last_synced_at":"2025-04-13T13:12:58.584Z","repository":{"id":15619386,"uuid":"18355907","full_name":"MoOx/parallaxify","owner":"MoOx","description":"Add parallax effect to your page when scrolling. No dependency.","archived":false,"fork":false,"pushed_at":"2017-11-21T06:47:15.000Z","size":15,"stargazers_count":17,"open_issues_count":4,"forks_count":1,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-27T04:12:32.903Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://moox.io/parallaxify/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MoOx.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-04-02T05:43:18.000Z","updated_at":"2023-07-04T20:29:51.000Z","dependencies_parsed_at":"2022-07-30T02:17:56.619Z","dependency_job_id":null,"html_url":"https://github.com/MoOx/parallaxify","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoOx%2Fparallaxify","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoOx%2Fparallaxify/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoOx%2Fparallaxify/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MoOx%2Fparallaxify/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MoOx","download_url":"https://codeload.github.com/MoOx/parallaxify/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248717237,"owners_count":21150389,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-19T15:47:04.514Z","updated_at":"2025-04-13T13:12:58.568Z","avatar_url":"https://github.com/MoOx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [Parallaxify](http://moox.io/parallaxify/)\n\n\u003e Such deep. Very scroll. Wow background.\n\nParallaxify allow you to add parallax effect to background images when scrolling.\nIt's a simple standalone JavaScript module (no jQuery or similar required) that is\n_less thant 1kb (minified \u0026amp; gzipped)_.\n\n## Installation\n\nYou can install parallaxify from **npm**\n\n```shell\n$ npm install parallaxify\n```\n\nOr using **bower**\n\n```shell\n$ bower install parallaxify\n```\n\nParallaxify can obviously be downloaded directly.\n\n## No dependencies\n\n_There is nothing you need. No jQuery or something._\n\n## Compatibility\n\nParallaxify should work with IE \u003c 9 if you add [`window.getComputedStyle` polyfill](http://snipplr.com/view/13523/).\n\n## Usage\n\n```js\nnew Parallaxify({\n  elements: \".js-Parallaxify\" // default\n, backgroundYMin: 100 // default\n, backgroundYMax: 0 // default\n}).registerUpdate()\n```\n\nThis will enable Parallaxify on this kind of HTML elements\n\n```html\n\u003cdiv class=\"js-Parallaxify\"\u003e\u003c/div\u003e\n```\n\nNote that the elements must have content or width/height.\nSee the [example page](src/index.html) to check what you might need.\n\n### Options\n\n#### `elements` (String or Array, default \".js-Parallaxify\")\n\nCSS Selector to use to retrieve elements to apply Parallaxify.\nCan be an array of elements, an HTMLCollection, or a NodeList.\n\n```js\nnew Parallaxify({ elements: document.getElementsByClassName(\".parallax\") }\n```\n\n#### `backgroundYMin` (Integer, default 100)\n\nDefault background position Y value when the element appears in the viewport.  \nCan be define for each elements using `data-parallaxify-y-min`.  \nSee the [test page](src/index.html) for examples.\n\n#### `backgroundYMax` (Integer, default 0)\n\nBackground position Y value when the element appears in the viewport.  \nCan be define for each elements using `data-parallaxify-y-max`.  \nSee the [test page](src/index.html) for examples.\n\n### API\n\n#### `Parallaxify.toArray()`\n\nTransform HTMLCollection, NodeList or similar to an array of DOM elements.\n\n#### `Parallaxify.prototype.update()`\n\nJust update Parallaxify elements.  \n__You don't need to use this method unless you want to have full control of Parallaxify behavior.__\n\n#### `Parallaxify.prototype.requestUpdate()`\n\nUsed to call `update()` method through `requestAnimationFrame()`.\n\n#### `Parallaxify.prototype.registerUpdate()`\n\nUse this function to enable Parallaxify automatically `requestUpdate()`.\nIt create a `requestAnimationFrame` loop but trigger update only if scroll have changed (just using window scroll give laggy results),\nThis will also attach the same behavior to window resize. Just to be sure.\n\nIf you don't want to make a requestAnimationFrameLoop, you can eventually listen\nwindow scroll/resize \u0026 trigger `update()` and can skip `registerUpdate()`/`requestUpdate()`.\nNote that it will probably result to more laggy results.\n\n---\n\n## [Changelog](CHANGELOG.md)\n\n## Contributing\n\nPlease read the file nobody reads (make me lie) [CONTRIBUTING.md](CONTRIBUTING.md)\n\n### tl;dr;\n\nFork, clone, then\n\n```shell\n$ npm i -g gulp\n$ npm i\n$ gulp\n```\n\nNow you can work on the file, then make a commit and a push something when gulp doesn't show any error.\nThanks.\n\n## [License](LICENSE-MIT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoox%2Fparallaxify","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoox%2Fparallaxify","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoox%2Fparallaxify/lists"}