{"id":19716487,"url":"https://github.com/dawaltconley/sass-parallax","last_synced_at":"2026-06-11T12:31:26.324Z","repository":{"id":132526733,"uuid":"389843767","full_name":"dawaltconley/sass-parallax","owner":"dawaltconley","description":"Mixin and styles for pure CSS parallax.","archived":false,"fork":false,"pushed_at":"2022-11-08T23:34:06.000Z","size":2221,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-16T04:59:49.400Z","etag":null,"topics":["parallax","pure-css","sass","scss"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/sass-parallax","language":"SCSS","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/dawaltconley.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-07-27T04:06:39.000Z","updated_at":"2023-04-07T02:40:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"f844c70a-f349-41e2-9afb-a230c8487915","html_url":"https://github.com/dawaltconley/sass-parallax","commit_stats":{"total_commits":48,"total_committers":1,"mean_commits":48.0,"dds":0.0,"last_synced_commit":"d1560ff67e18bbfed8100059f95c3a88ee0ab07a"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"purl":"pkg:github/dawaltconley/sass-parallax","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dawaltconley%2Fsass-parallax","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dawaltconley%2Fsass-parallax/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dawaltconley%2Fsass-parallax/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dawaltconley%2Fsass-parallax/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dawaltconley","download_url":"https://codeload.github.com/dawaltconley/sass-parallax/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dawaltconley%2Fsass-parallax/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34199516,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-11T02:00:06.485Z","response_time":57,"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":["parallax","pure-css","sass","scss"],"created_at":"2024-11-11T22:42:21.875Z","updated_at":"2026-06-11T12:31:26.287Z","avatar_url":"https://github.com/dawaltconley.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sass-parallax\n\nA small set of mixins for building pure CSS parallax websites. Based on [Keith\nClark's layout](https://keithclark.co.uk/articles/pure-css-parallax-websites/).\n\n## Basic Use\n\n```scss\n@use 'node_modules/sass-parallax' with ($perspective: 100px);\n\nbody {\n    @include sass-parallax.body();\n}\n\n.parallax {\n    @include sass-parallax.page();\n}\n\n.parallax__group {\n    @include sass-parallax.group();\n}\n\n.parallax__bg--deep {\n    @include sass-parallax.bg(-200px);\n}\n\n.parallax__bg--middle {\n    @include sass-parallax.bg(-100px);\n}\n\n.parallax__bg--shallow {\n    @include sass-parallax.bg(-50px);\n}\n```\n\nDocument should look something like this:\n\n```html\n\u003cbody\u003e\n    \u003cdiv class=\"parallax\"\u003e\n        \u003cdiv class=\"parallax__group\"\u003e\n            \u003cdiv class=\"parallax__bg--deep\"\u003e\u003c/div\u003e\n            \u003cdiv class=\"parallax__bg--middle\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv\u003e\n            Non-parallax content\n        \u003c/div\u003e\n        \u003cdiv class=\"parallax__group\"\u003e\n            \u003cdiv class=\"parallax__bg--shallow\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/body\u003e\n```\n\nThe mixins import also exposes the `support` mixin, which can be used to include\nsome content only if the browser supports CSS parallax.\n\n```scss\n.element {\n    // some default styles\n    @include parallax.support {\n        // some parallax-only styles\n    }\n}\n```\n\n## Options\n\n### `$perspective`\n\nYou can configure the depth of field when importing the mixins by setting the\n`perspective` variable. The higher the value, the \"further back\" (more negative\npixels) will be required to slow the movement of an element. By default it is\n`2000px`; pretty shallow.\n\nThe `$perspective` can also be individually set as a parameter in the `page` and\n`bg` mixins, although this is not recommended, as any difference between them\nwill throw off the parallax alignment.\n\n### `$IE`\n\nIn order for parallax layouts to display properly in Internet Explorer (as flat,\nnon-parallax pages) every immediate child of a `group` element must have their\nposition set to either relative or absolute. This is off by default, to avoid\npotential cascade issues, but can be applied by setting `$IE` to `true` when\nimporting the mixins, or when using the `group` mixin.\n\n```scss\n@use 'node_modules/sass-parallax' with ($IE: true);\n\n.parallax__group {\n    @include sass-parallax.group($IE: true);\n}\n```\n\n### `$css-properites`\n\nSetting this to `true` will use CSS properties where possible. Rather than letting Sass handle most of the math during build, the `bg` function will output `calc` statements for the browser to render. This allows live editing of an element's parallax depth using the `--parallax-depth` property. This property is a unitless number, and calculates depth relative to the `--parallax-perspective` property.\n\n```scss\n@use 'node_modules/sass-parallax' with ($css-properties: true);\n\n.parallax {\n    @include sass-parallax.page(100px, $css-properties: true);\n    // --parallax-perspective: 100px;\n    // sets the perspective on this element\n    // and is inherited by its children\n}\n\n.parallax__bg--deep {\n    @include sass-parallax.bg(-2, $css-properties: true);\n    // --parallax-depth: -2;\n    // controls depth of this background element\n    // relative to --parallax-perspective\n}\n```\n\n### `$disable`\n\nA boolean option, defaults to `false`. Setting this to `true` will omit any styles within the `support` mixin, mimicking the styles of an unsupported browser. Useful for testing.\n\n## Pure CSS\n\nThis package outputs a pure CSS file, `dist/parallax.css`, with `.parallax`, `.parallax__group`, and `.parallax__bg` classes that style parallax elements using the above CSS properties.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdawaltconley%2Fsass-parallax","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdawaltconley%2Fsass-parallax","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdawaltconley%2Fsass-parallax/lists"}