Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dawaltconley/sass-parallax
Mixin and styles for pure CSS parallax.
https://github.com/dawaltconley/sass-parallax
parallax pure-css sass scss
Last synced: 4 days ago
JSON representation
Mixin and styles for pure CSS parallax.
- Host: GitHub
- URL: https://github.com/dawaltconley/sass-parallax
- Owner: dawaltconley
- Created: 2021-07-27T04:06:39.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-08T23:34:06.000Z (about 2 years ago)
- Last Synced: 2024-10-30T04:49:54.692Z (16 days ago)
- Topics: parallax, pure-css, sass, scss
- Language: SCSS
- Homepage: https://www.npmjs.com/package/sass-parallax
- Size: 2.12 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# sass-parallax
A small set of mixins for building pure CSS parallax websites. Based on [Keith
Clark's layout](https://keithclark.co.uk/articles/pure-css-parallax-websites/).
## Basic Use
```scss
@use 'node_modules/sass-parallax' with ($perspective: 100px);
body {
@include sass-parallax.body();
}
.parallax {
@include sass-parallax.page();
}
.parallax__group {
@include sass-parallax.group();
}
.parallax__bg--deep {
@include sass-parallax.bg(-200px);
}
.parallax__bg--middle {
@include sass-parallax.bg(-100px);
}
.parallax__bg--shallow {
@include sass-parallax.bg(-50px);
}
```
Document should look something like this:
```html
Non-parallax content
```
The mixins import also exposes the `support` mixin, which can be used to include
some content only if the browser supports CSS parallax.
```scss
.element {
// some default styles
@include parallax.support {
// some parallax-only styles
}
}
```
## Options
### `$perspective`
You can configure the depth of field when importing the mixins by setting the
`perspective` variable. The higher the value, the "further back" (more negative
pixels) will be required to slow the movement of an element. By default it is
`2000px`; pretty shallow.
The `$perspective` can also be individually set as a parameter in the `page` and
`bg` mixins, although this is not recommended, as any difference between them
will throw off the parallax alignment.
### `$IE`
In order for parallax layouts to display properly in Internet Explorer (as flat,
non-parallax pages) every immediate child of a `group` element must have their
position set to either relative or absolute. This is off by default, to avoid
potential cascade issues, but can be applied by setting `$IE` to `true` when
importing the mixins, or when using the `group` mixin.
```scss
@use 'node_modules/sass-parallax' with ($IE: true);
.parallax__group {
@include sass-parallax.group($IE: true);
}
```
### `$css-properites`
Setting 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.
```scss
@use 'node_modules/sass-parallax' with ($css-properties: true);
.parallax {
@include sass-parallax.page(100px, $css-properties: true);
// --parallax-perspective: 100px;
// sets the perspective on this element
// and is inherited by its children
}
.parallax__bg--deep {
@include sass-parallax.bg(-2, $css-properties: true);
// --parallax-depth: -2;
// controls depth of this background element
// relative to --parallax-perspective
}
```
### `$disable`
A 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.
## Pure CSS
This 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.