{"id":20983554,"url":"https://github.com/oom-components/scroll-styles","last_synced_at":"2026-04-21T22:32:00.313Z","repository":{"id":57133324,"uuid":"275160300","full_name":"oom-components/scroll-styles","owner":"oom-components","description":"Javascript library to apply css custom properties depending on the scroll position","archived":false,"fork":false,"pushed_at":"2020-06-29T16:40:13.000Z","size":14,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-22T08:03:35.593Z","etag":null,"topics":["animation","es6","parallax","scroll","vanilla-javascript"],"latest_commit_sha":null,"homepage":"","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/oom-components.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-26T13:17:04.000Z","updated_at":"2023-06-22T18:18:10.000Z","dependencies_parsed_at":"2022-09-03T13:53:47.640Z","dependency_job_id":null,"html_url":"https://github.com/oom-components/scroll-styles","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oom-components%2Fscroll-styles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oom-components%2Fscroll-styles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oom-components%2Fscroll-styles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oom-components%2Fscroll-styles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oom-components","download_url":"https://codeload.github.com/oom-components/scroll-styles/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243392281,"owners_count":20283559,"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","es6","parallax","scroll","vanilla-javascript"],"created_at":"2024-11-19T05:49:14.717Z","updated_at":"2025-12-29T22:22:14.155Z","avatar_url":"https://github.com/oom-components.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @oom/scroll-styles\n\nJavascript library to apply css custom properties depending on the scroll position, allowing to create scrolling efects like parallax. It has the following features:\n\n* No dependencies\n* Superlight\n* High performance\n* Follows the **progressive enhancement strategy**\n* Built with ES6, so you may need a transpiler for old browser support\n\nIt's inspired by [basicScroll](https://github.com/electerious/basicScroll) library but lighter and with better performance, in order to be more flexible and customizable.\n\n## Install\n\nRequirements:\n\n* NPM or Yarn to install [the package and the dependencies](https://www.npmjs.com/@oom/scroll-styles)\n* Any browser supporting the following APIs:\n  * [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to detect when the elements are visible in the viewport.\n  * [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) to perform the animations.\n  * [MediaQueryList](https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList) to observe elements while a media-query is true.\n\n```sh\nnpm install @oom/scroll-styles\n```\n\n## Usage\n\n```js\nimport Scroll from './vendors/@oom/scroll-styles/src/scroll.js';\n\nconst scroll = new Scroll();\n\n//Register an element to observe\nconst element = document.querySelector('.parallax');\n\nscroll.observe(element, {\n    name: '--scale',  // Name of the custom property\n    element: [0, 1],  // [from, to] element intersection (0 = top, 1 = bottom, 0.5 = middle, etc)\n    viewport: [1, 0]  // [from, to] viewport intersection\n    media: '(min-width: 500px)'  // Observe only while this media-query is true\n\n    //Custom handler, if you want to do more things that just update the property\n    handler(element, scale, options) {\n        element.style.setProperty(options.name, scale);\n    }\n})\n\n//Remove an element\nscroll.unobserve(element);\n\n//Remove all elements\nscroll.disconnect();\n```\n\nThe `--scale` variable is a float number between 0 and 1, so you can use it in the css code:\n\n```css\n.parallax {\n    /* Use the value as is */\n    opacity: var(--scale, 1);\n\n    /* Use calc() to convert to other units */\n    transform: translateY(calc(var(--scale, 1) * 50rem));\n}\n```\n\n## Demo\n\nTo run the demo, just clone this repository, enter in the directory and execute:\n\n```sh\nnpm install\nnpm start\n```\n\nYou should see something in `http://localhost:8080/`\n\nThere's an online demo here: https://oom-components.github.io/scroll-styles/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foom-components%2Fscroll-styles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foom-components%2Fscroll-styles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foom-components%2Fscroll-styles/lists"}