{"id":13393223,"url":"https://github.com/dixonandmoe/rellax","last_synced_at":"2026-02-22T03:02:35.915Z","repository":{"id":37445232,"uuid":"52831797","full_name":"dixonandmoe/rellax","owner":"dixonandmoe","description":"Lightweight, vanilla javascript parallax library","archived":false,"fork":false,"pushed_at":"2024-08-24T00:53:35.000Z","size":235,"stargazers_count":7162,"open_issues_count":75,"forks_count":850,"subscribers_count":98,"default_branch":"master","last_synced_at":"2026-02-01T12:35:10.854Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://dixonandmoe.com/rellax/","language":"HTML","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/dixonandmoe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2016-02-29T23:12:17.000Z","updated_at":"2026-01-30T15:34:22.000Z","dependencies_parsed_at":"2024-04-27T14:43:56.134Z","dependency_job_id":"10b57f59-92ff-4974-b3c3-733d2eb580ff","html_url":"https://github.com/dixonandmoe/rellax","commit_stats":{"total_commits":190,"total_committers":39,"mean_commits":4.871794871794871,"dds":0.5526315789473684,"last_synced_commit":"62bc17d3e7c1a5b472dc308b3ea831dd594954b8"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/dixonandmoe/rellax","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dixonandmoe%2Frellax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dixonandmoe%2Frellax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dixonandmoe%2Frellax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dixonandmoe%2Frellax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dixonandmoe","download_url":"https://codeload.github.com/dixonandmoe/rellax/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dixonandmoe%2Frellax/sbom","scorecard":{"id":345553,"data":{"date":"2025-08-11","repo":{"name":"github.com/dixonandmoe/rellax","commit":"9ed6cb0aae03c9ad2d46837e4bc5f700c8c38132"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4.1,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Code-Review","score":8,"reason":"Found 5/6 approved changesets -- score normalized to 8","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 29 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-18T06:57:08.551Z","repository_id":37445232,"created_at":"2025-08-18T06:57:08.551Z","updated_at":"2025-08-18T06:57:08.551Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29704401,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T23:35:04.139Z","status":"online","status_checked_at":"2026-02-22T02:00:08.193Z","response_time":110,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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-07-30T17:00:46.701Z","updated_at":"2026-02-22T03:02:35.882Z","avatar_url":"https://github.com/dixonandmoe.png","language":"HTML","funding_links":[],"categories":["HTML","Scroll","Scroll \u0026 Parallax","Scroll [🔝](#readme)","Javascript Animation Libraries","Repository","滚动","Table of Contents","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["Other","Markdown","Animation","其它","Scroll Animation Libraries"],"readme":"# RELLAX\n\n[![NPM Package](https://img.shields.io/npm/v/rellax.svg)](https://www.npmjs.org/package/rellax)\n[![Minified Size](https://img.shields.io/bundlephobia/min/rellax.svg?label=minified)](https://bundlephobia.com/result?p=rellax)\n[![Gzipped Size](https://img.shields.io/bundlephobia/minzip/rellax.svg?label=gzipped)](https://bundlephobia.com/result?p=rellax)\n\nRellax is a buttery smooth, super lightweight, vanilla javascript parallax library. **Update:** Rellax now works on mobile (v1.0.0).\n\n* [Demo Website](https://dixonandmoe.com/rellax/)\n\n\n## Getting Started\n### Using npm\n\n`npm install rellax --save`\n\n### Using yarn\n\n`yarn add rellax`\n\n### CDN\n\n`\u003cscript src=\"https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js\"\u003e\u003c/script\u003e`\n\n### Download Locally\n\nif you're old school like us download and insert `rellax.min.js` in your html\n\n\n```html\n\u003cdiv class=\"rellax\"\u003e\n  I’m that default chill speed of \"-2\"\n\u003c/div\u003e\n\u003cdiv class=\"rellax\" data-rellax-speed=\"7\"\u003e\n  I’m super fast!!\n\u003c/div\u003e\n\u003cdiv class=\"rellax\" data-rellax-speed=\"-4\"\u003e\n  I’m extra slow and smooth\n\u003c/div\u003e\n\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  // Accepts any class name\n  var rellax = new Rellax('.rellax');\n\u003c/script\u003e\n```\n```html\n\u003cscript\u003e\n  // Also can pass in optional settings block\n  var rellax = new Rellax('.rellax', {\n    speed: -2,\n    center: false,\n    wrapper: null,\n    round: true,\n    vertical: true,\n    horizontal: false\n  });\n\u003c/script\u003e\n```\n## Features\n\n### Speed\nUse the `data-rellax-speed` attribute to set the speed of a `.rellax` element to something other than the default value (which is `-2`). A negative value will make it move slower than regular scrolling, and a positive value will make it move faster. We recommend keeping the speed between `-10` and `10`.\n\n#### Responsive Speed\nUse responsive speed attributes for breakpoint levels that require a different speed. Defaults to the `data-rellax-speed` setting in unspecified breakpoints.\n```html\n\u003cdiv class=\"rellax\" data-rellax-speed=\"7\" data-rellax-xs-speed=\"-5\" data-rellax-mobile-speed=\"3\" data-rellax-tablet-speed=\"-8\" data-rellax-desktop-speed=\"1\"\u003e\n  I parallax at all different speeds depending on your screen width.\n\u003c/div\u003e\n```\n\nPass an array of breakpoints. Each breakpoint value represents the resolution for mobile, tablet, desktop respectively. Checkout the responsiveness of the [`demo`](https://dixonandmoe.com/rellax/)\n```html\n\u003cscript\u003e\n  // This is the default setting\n  var rellax = new Rellax('.rellax', {\n    breakpoints: [576, 768, 1201]\n  });\n\u003c/script\u003e\n```\n\n\n### Centering\nAfter some fantastic work from [@p-realinho](https://github.com/p-realinho), we just released the ability to center parallax elements in your viewport! We'll be building a nice demo website, but for now check out the tests folder for several examples of how it works.\n\nThere's two ways to implement centering, either on specific elements or as a global option.\n1. #### Element-wise Centering\n- Add the ```data-rellax-percentage=\"0.5\"``` to a specific html element\n```html\n\u003cdiv class=\"rellax\" data-rellax-percentage=\"0.5\"\u003e\n  I’m that default chill speed of \"-2\" and \"centered\"\n\u003c/div\u003e\n\u003cdiv class=\"rellax\" data-rellax-speed=\"7\" data-rellax-percentage=\"0.5\"\u003e\n  I’m super fast!! And super centered!!\n\u003c/div\u003e\n\u003cdiv class=\"rellax\" data-rellax-speed=\"-4\" data-rellax-percentage=\"0.5\"\u003e\n  I’m extra slow and smooth, and hella centered.\n\u003c/div\u003e\n```\n2. #### Global Centering\n- To activate the center feature in your whole html, add the code your `\u003cscript\u003e` tag or JS file:\n```html\n\u003cscript\u003e\n  // Center all the things!\n  var rellax = new Rellax('.rellax', {\n    center: true\n  });\n\u003c/script\u003e\n```\n\n### Z-index\nIf you want to sort your elements properly in the Z space, you can use the data-rellax-zindex property\n```html\n\u003cdiv class=\"rellax\"\u003e\n  I’m that default chill speed of \"-2\" and default z-index of 0\n\u003c/div\u003e\n\u003cdiv class=\"rellax\" data-rellax-speed=\"7\" data-rellax-zindex=\"5\"\u003e\n  I’m super fast!! And on top of the previous element, I'm z-index 5!!\n\u003c/div\u003e\n```\n\n### Horizontal Parallax\nHorizontal parallax is disabled by default. You can enable it by passing `horizontal: true` in the settings block.\nThis feature is intended for panoramic style websites, where users scroll horizontally instead of vertically.\nNote that this can work together at the same time with the default vertical parallax. If you do not want this, pass `vertical: false` in the settings block.\n```html\n\u003cscript\u003e\n  // Adding horizantal parallax scrolling\n  var rellax = new Rellax('.rellax', {\n    // Activate horizantal scrolling\n    // Turned off by default\n    horizontal: true\n    //Deactivate vertical scrolling\n    vertical: false\n  });\n\u003c/script\u003e\n```\n\n### Custom Wrapper\nBy default, the position of parallax elements is determined via the scroll position of the body. Passing in the `wrapper` property will tell Rellax to watch that element instead.\n```html\n\u003cscript\u003e\n  // Set wrapper to .custom-element instead of the body\n  var rellax = new Rellax('.rellax', {\n    wrapper: '.custom-element'\n  });\n\u003c/script\u003e\n```\n\n### Refresh\n```html\n\u003cscript\u003e\n  // Start Rellax\n  var rellax = new Rellax('.rellax');\n\n  // Destroy and create again parallax with previous settings\n  rellax.refresh();\n\u003c/script\u003e\n```\n\n### Destroy\n```html\n\u003cscript\u003e\n  // Start Rellax\n  var rellax = new Rellax('.rellax');\n\n  // End Rellax and reset parallax elements to their original positions\n  rellax.destroy();\n\u003c/script\u003e\n```\n\n### Callback\n```html\n\u003cscript\u003e\n  // Start Rellax\n  var rellax = new Rellax('.rellax-blur-card', {\n    callback: function(positions) {\n      // callback every position change\n      console.log(positions);\n    }\n  });\n\u003c/script\u003e\n```\n\n### Target node\nInstead of using a className you can use a node, handy when using React and you want to use `refs` instead of `className`.\n```jsx\n\u003cdiv ref={ref =\u003e { this.rellaxRef = ref }}\u003e\n  I’m that default chill speed of \"-2\"\n\u003c/div\u003e\n\nvar rellax = new Rellax(this.rellaxRef)\n```\n\n## In the Wild\nIf you're using Rellax in production, we'd love to list you here! Let us know: moe@dixonandmoe.com\n- [Bowmore Scotch](https://www.bowmore.com/)\n- [Generated Photos](https://generated.photos/)\n- [How Much Does a Website Cost](https://designagency.io/)\n- [Linux Man Pages](https://dashdash.io/)\n- [Laws of UX](https://lawsofux.com/)\n- [Finch](https://finch.io/)\n- [Embedded Payroll](https://robotist.com/embedded-payroll-api)\n- [Product Designer in San Francisco](https://moeamaya.com/)\n- [EthWorks](http://ethworks.io/)\n- [Lorem Ipsum Generator](https://loremipsumgenerator.com/)\n- [Deeson](https://www.deeson.co.uk/)\n\n## Development\nIn the spirit of lightweight javascript, the build processes (thus far) is lightweight also.\n\n1. Open demo.html\n2. Make code changes and refresh browser\n3. Once feature is finished or bug fixed, use [jshint](http://jshint.com/) to lint code\n4. Fix lint issues then use [Google Closure Compiler](https://closure-compiler.appspot.com/home) to minify\n5. 🍻\n\n## Changelog\n- 1.7.1: Remove animation on destory [PR](https://github.com/dixonandmoe/rellax/pull/132)\n- 1.7.0: Scroll position set relative to the wrapper [PR](https://github.com/dixonandmoe/rellax/pull/125)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdixonandmoe%2Frellax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdixonandmoe%2Frellax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdixonandmoe%2Frellax/lists"}