{"id":18997355,"url":"https://github.com/chase-moskal/chillax","last_synced_at":"2025-07-05T10:36:39.155Z","repository":{"id":91093406,"uuid":"112890627","full_name":"chase-moskal/chillax","owner":"chase-moskal","description":"vertical parallax engine for beautiful web presentations","archived":false,"fork":false,"pushed_at":"2018-02-08T02:39:39.000Z","size":602,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-21T12:30:42.820Z","etag":null,"topics":["parallax","parallax-effect","parallax-scrolling"],"latest_commit_sha":null,"homepage":"https://chasemoskal.com/chillax/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chase-moskal.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}},"created_at":"2017-12-03T01:19:20.000Z","updated_at":"2018-02-17T00:58:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"9968a222-8ed0-497c-869a-1a8bdc3819f9","html_url":"https://github.com/chase-moskal/chillax","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chase-moskal/chillax","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chase-moskal%2Fchillax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chase-moskal%2Fchillax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chase-moskal%2Fchillax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chase-moskal%2Fchillax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chase-moskal","download_url":"https://codeload.github.com/chase-moskal/chillax/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chase-moskal%2Fchillax/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263728466,"owners_count":23502502,"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":["parallax","parallax-effect","parallax-scrolling"],"created_at":"2024-11-08T17:39:07.679Z","updated_at":"2025-07-05T10:36:39.099Z","avatar_url":"https://github.com/chase-moskal.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# ❄ — c h i l l a x — ❄\n## vertical parallax engine for beautiful web presentations\n\n### features\n\n- [**view the live chillax demo**](https://chase-moskal.github.io/chillax/)\n- parallax animation engine to create beautiful 3d-feeling scenes\n- only works vertically by design — no horizontal parallaxing\n- goal was to create the look of \"3d sunken windows\" on the web page\n- scrolling activity actuates the parallax effects\n- on android the parallax effect works via scrolling\n- on ios, gyroscopic activity actuates the parallax effects  \n\t*(experimental: currently, only works in landscape with home button on the right)*\n\n### install chillax into your hip new app\n\n1. `npm install chillax`\n2. `import Chillax from \"chillax\"` — *(it's a commonjs module)*\n3. link in the stylesheet, `node_modules/chillax/dist/chillax-styles.css`\n4. proceed to chillax usage instructions below\n\n### install chillax the old fashioned way\n\n1. download the chillax \"global bundle\" script, and stylesheet *(right-click save-as)*\n\n\t- [chillax.global.bundle.js](https://raw.githubusercontent.com/chase-moskal/chillax/gh-pages/dist/chillax.global.bundle.js)\n\t- [chillax-styles.css](https://raw.githubusercontent.com/chase-moskal/chillax/gh-pages/dist/chillax-styles.css)\n\n2. load the chillax script and stylesheet onto your html page\n\n\t```html\n\t\u003clink rel=\"stylesheet\" href=\"chillax-styles.css\"/\u003e\n\n\t\u003cscript src=\"chillax.global.bundle.js\"\u003e\u003c/script\u003e\n\t```\n\n3. proceed to chillax usage instructions below\n\n### chillax usage instructions\n\n1. prepare your png image layers — use the template or listen carefully\n\n\t- by default, chillax assumes your parallax scenes are `16:9` in aspect ratio,  \n\t\tyou are expected to author all of your layer images at double-height (`16:18`).  \n\t\tthis extra height provides 100% leeway for the parallax effects (otherwise your layers will look cut-off at some point)\n\t- you should probably use the `psd` template in the images folder — `parallax-template.zip`\n\t- the template shows that the viewport is a `16:9` window centered within the `16:18` image\n\t- the template is at 4k resolution, but you should save-for-web at half size (`1920x2160`)\n\n2. set up a chillax view on your html page\n\n\t```html\n\t\u003cdiv data-chillax\u003e\n\t\t\u003cimg data-chillax-layer=\"10\" src=\"background.png\" alt=\"\"/\u003e\n\t\t\u003cimg data-chillax-layer=\"5\" src=\"midground.png\" alt=\"\"/\u003e\n\t\t\u003cimg data-chillax-layer=\"0\" src=\"foreground.png\" alt=\"\"/\u003e\n\t\u003c/div\u003e\n\t```\n\n\t- `[data-chillax]` defaults to `100` \"leeway\",  \n\t\twhich is percentage of parallax sliding action allowable, relative to the height of the view\n\n\t- `[data-chillax-layer]` specifies the `depth`,  \n\t\twhere `0` is flush with the rest of the page,  \n\t\t`10` is sunken \"fully\" into the background,  \n\t\tand anything negative is popping out of the view toward the user\n\n\t- note that the chillax css styles define scenes with a display aspect ratio of `16:9` – if you want a different ratio, you must modify/overwrite these css styles\n\n3. activate chillax on your views\n\n\t```html\n\t\u003cscript\u003e\n\t\tconst chillax = new Chillax()\n\t\u003c/script\u003e\n\t```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchase-moskal%2Fchillax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchase-moskal%2Fchillax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchase-moskal%2Fchillax/lists"}