{"id":25600612,"url":"https://github.com/billiebobbel23/cssvar-interaction","last_synced_at":"2026-04-16T18:05:25.164Z","repository":{"id":35006588,"uuid":"195679018","full_name":"BillieBobbel23/cssvar-interaction","owner":"BillieBobbel23","description":"A tiny package to set CSS variabels using some Javascript and device API's. ","archived":false,"fork":false,"pushed_at":"2023-01-07T07:35:32.000Z","size":422,"stargazers_count":1,"open_issues_count":12,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-02-21T06:16:19.170Z","etag":null,"topics":["css","css-variables","event-listener","interactive","javascript"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BillieBobbel23.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-07T17:28:07.000Z","updated_at":"2019-08-05T21:49:31.000Z","dependencies_parsed_at":"2023-01-15T11:52:54.176Z","dependency_job_id":null,"html_url":"https://github.com/BillieBobbel23/cssvar-interaction","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BillieBobbel23%2Fcssvar-interaction","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BillieBobbel23%2Fcssvar-interaction/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BillieBobbel23%2Fcssvar-interaction/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BillieBobbel23%2Fcssvar-interaction/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BillieBobbel23","download_url":"https://codeload.github.com/BillieBobbel23/cssvar-interaction/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240038548,"owners_count":19738162,"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":["css","css-variables","event-listener","interactive","javascript"],"created_at":"2025-02-21T15:27:09.267Z","updated_at":"2026-04-16T18:05:25.121Z","avatar_url":"https://github.com/BillieBobbel23.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# cssvar-interaction\n\n![npm latest version](https://img.shields.io/npm/v/cssvar-interaction.svg)\n![github version](https://img.shields.io/github/package-json/v/billiebobbel23/cssvar-interaction.svg)\n![stats](https://img.shields.io/david/dev/billiebobbel23/cssvar-interaction)\n![npm bundle size](https://img.shields.io/bundlephobia/minzip/cssvar-interaction.svg)\n![npm downloads](https://img.shields.io/npm/dt/cssvar-interaction.svg)\n\nA tiny JS powered NPM package to set/update CSS variables using eventListeners.\n\n## Installation\n\nInstall using [Node Package Manager](https://npmjs.com): \n\n``npm install cssvar-interaction --save`` \n\n## Usage:\n\n*For examples on CSS variables see the [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/var)*\n\n* Write some CSS using CSS variable ``--x`` and multiply it by 1 unit of measurement using ``calc()``.\n\n  `` calc( var(--x) * 1px ) ``\n\n* Apply it to a ``transform`` statement with any option:\n\n    `` transform: translateX(calc(var(--x) * 1px));``\n\n* use it on any CSS selector:\n\n  ``` \n  div {\n    transition: all linear 1s;  \n    transform: translateX(calc(var(--x) * 1px));\n  }\n  ```\n\n* Include the eventListeners into your document\n\n  Using ``\u003cscript\u003e`` tags:\n\n  `` \u003cscript src=\"node_modules/cssvar-interation/dist/index.js\" /\u003e ``\n\n  Using Javascript ``import``:\n\n  `` import \"cssvar-interaction/dist/bundle\"; ``\n\n\n## Values:\n\nThe following are some built-in variables:\n\n**eventListeners:**\n\n``--x`` and ``--y`` - current X and Y positions of pointer (within the viewport)\n\n``--s`` Current scroll offset from top of document\n\n**constants:**\n\n``--w`` and ``--h`` - Current document width and height\n\n``--vw`` and ``--vh`` - Viewport width and height\n\n\n## Examples:\n\nRun `` npm test `` in the root of your project to open an HTML demo page with some examples.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbilliebobbel23%2Fcssvar-interaction","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbilliebobbel23%2Fcssvar-interaction","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbilliebobbel23%2Fcssvar-interaction/lists"}