{"id":13599031,"url":"https://github.com/mickaelchanrion/rolly","last_synced_at":"2025-04-10T12:31:11.499Z","repository":{"id":34042552,"uuid":"162298462","full_name":"mickaelchanrion/rolly","owner":"mickaelchanrion","description":"Custom scroll with inertia, smooth parallax and scenes manager","archived":false,"fork":false,"pushed_at":"2023-12-17T17:05:46.000Z","size":4314,"stargazers_count":344,"open_issues_count":23,"forks_count":12,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-25T08:02:46.336Z","etag":null,"topics":["animation","parallax","rolly","scene","scroll","scrollto","smooth-scrolling"],"latest_commit_sha":null,"homepage":"https://rolly.maj.digital/","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/mickaelchanrion.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}},"created_at":"2018-12-18T14:14:36.000Z","updated_at":"2024-04-14T01:21:27.000Z","dependencies_parsed_at":"2023-12-17T18:25:17.599Z","dependency_job_id":"3faf6cdf-24a5-4048-b63b-43e5bf163525","html_url":"https://github.com/mickaelchanrion/rolly","commit_stats":{"total_commits":47,"total_committers":2,"mean_commits":23.5,"dds":0.04255319148936165,"last_synced_commit":"4141a96d3bbe3d4f29493d2c50bb394af746bd83"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mickaelchanrion%2Frolly","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mickaelchanrion%2Frolly/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mickaelchanrion%2Frolly/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mickaelchanrion%2Frolly/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mickaelchanrion","download_url":"https://codeload.github.com/mickaelchanrion/rolly/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248217126,"owners_count":21066633,"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":["animation","parallax","rolly","scene","scroll","scrollto","smooth-scrolling"],"created_at":"2024-08-01T17:00:59.079Z","updated_at":"2025-04-10T12:31:11.105Z","avatar_url":"https://github.com/mickaelchanrion.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003ca href=\"https://rolly.maj.digital\"\u003e\u003cimg src=\"/rolly.png\" width=\"250\"/\u003e\u003c/a\u003e\n  \u003cbr\u003e\n  rolly.js\n\u003c/h1\u003e\n\u003cbr\u003e\n\u003cp align=\"center\"\u003eCustom scroll with inertia, smooth parallax and scenes manager.\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/rolly.js\"\u003e\n\t\t\u003cimg src=\"https://img.shields.io/npm/v/rolly.js.svg\" alt=\"Version\"\u003e\n\t\u003c/a\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\n\t\t\u003cimg src=\"https://img.shields.io/npm/l/rolly.js.svg\" alt=\"MIT License\"\u003e\n\t\u003c/a\u003e\n\u003c/p\u003e\n\n## What is rolly.js?\n\nrolly.js is a library written in javascript for building pages that moves smoothly.\n\nThis library offers 3 main features:\n\n- change the behavior of the default scroll for a smoother effect\n- quickly and flexibly add a customizable parallax effect to any element on a page\n- add any behavior to your scenes bound to the scroll state (custom transforms, seek animations…)\n\nCheckout the [demo](https://rolly.maj.digital/)!\n\n## Documentation\n\nThe documentation is available here: [https://mickaelchanrion.github.io/rolly/](https://mickaelchanrion.github.io/rolly/)\n\n## Getting started\n\n\u003cdetails\u003e\u003csummary\u003eClick to expand\u003c/summary\u003e\n\u003cp\u003e\n\n### Download rolly\n\n```bash\n$ npm install rolly.js\n```\n\nOr add it as a script:\n\n```html\n\u003cscript src=\"https://unpkg.com/rolly.js@\u003cVERSION\u003e/dist/rolly.min.js\"\u003e\u003c/script\u003e\n```\n\n### Setup the markup\n\nCreate your scenes:\n\n```html\n\u003cbody\u003e\n  \u003cstyle\u003e\n    [data-scene] {\n      max-width: 800px;\n      padding: 10vh 50px;\n      margin: 10vh auto;\n      font-family: sans-serif;\n      font-size: 100px;\n      color: #fff;\n      text-align: center;\n      background: linear-gradient(\n        to top,\n        rgb(252, 92, 125),\n        rgb(106, 130, 251)\n      );\n      border-radius: 5px;\n    }\n\n    [data-scene]:first-child {\n      background: linear-gradient(\n        to bottom,\n        rgb(168, 192, 255),\n        rgb(63, 43, 150)\n      );\n    }\n\n    [data-scene]:last-child {\n      margin-bottom: 50vh;\n    }\n  \u003c/style\u003e\n  \u003cdiv class=\"app\"\u003e\n    \u003cdiv data-scene data-speed=\"0.2\"\u003erolly.js\u003c/div\u003e\n    \u003cdiv data-scene\u003eprovides…\u003c/div\u003e\n    \u003cdiv data-scene data-speed=\"1.2\"\u003esome delicious…\u003c/div\u003e\n    \u003cdiv data-scene data-speed=\"1.4\"\u003every delicious…\u003c/div\u003e\n    \u003cdiv data-scene data-speed=\"1.6\"\u003eparallax effects ❤️\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/body\u003e\n```\n\n### Import the CSS of rolly\n\nImport the CSS of rolly: `node_modules/rolly.js/css/style.css`\n\nOr from unpkg: `https://unpkg.com/rolly.js@\u003cVERSION\u003e/css/style.css`\n\n### Initialize rolly\n\n```js\nimport rolly from 'rolly.js';\n\nconst r = rolly({\n  view: document.querySelector('.app'),\n  native: true,\n  // other options\n});\nr.init();\n```\n\n\u003c/p\u003e\n\u003c/details\u003e\n\n## Examples\n\nYou will find some examples [here](https://codepen.io/collection/AyEJzY/).\n\n## Roadmap\n\n- [x] Create documentation\n- [x] Create some examples\n- [ ] Fix the scrollTo function\n- [ ] Test and fix [issues](https://mickaelchanrion.github.io/rolly/api/#vertical) when `vertical` options is set to `false`\n- [ ] Change the way the easing is computed. Probably with a clean Lerp function\n- [ ] Implement different easing for each scene (it would add a nice organic effect 🤩)\n- [Need a feature?](https://github.com/mickaelchanrion/rolly/issues/new?labels=feature+request)\n\n## Contributors\n\n- [Mickael Chanrion](https://github.com/mickaelchanrion/)\n- [MAJ digital](https://github.com/majdigital/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmickaelchanrion%2Frolly","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmickaelchanrion%2Frolly","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmickaelchanrion%2Frolly/lists"}