https://github.com/chase-moskal/chillax
vertical parallax engine for beautiful web presentations
https://github.com/chase-moskal/chillax
parallax parallax-effect parallax-scrolling
Last synced: 11 months ago
JSON representation
vertical parallax engine for beautiful web presentations
- Host: GitHub
- URL: https://github.com/chase-moskal/chillax
- Owner: chase-moskal
- License: isc
- Created: 2017-12-03T01:19:20.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-08T02:39:39.000Z (over 8 years ago)
- Last Synced: 2025-02-21T12:30:42.820Z (over 1 year ago)
- Topics: parallax, parallax-effect, parallax-scrolling
- Language: TypeScript
- Homepage: https://chasemoskal.com/chillax/
- Size: 588 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ❄ — c h i l l a x — ❄
## vertical parallax engine for beautiful web presentations
### features
- [**view the live chillax demo**](https://chase-moskal.github.io/chillax/)
- parallax animation engine to create beautiful 3d-feeling scenes
- only works vertically by design — no horizontal parallaxing
- goal was to create the look of "3d sunken windows" on the web page
- scrolling activity actuates the parallax effects
- on android the parallax effect works via scrolling
- on ios, gyroscopic activity actuates the parallax effects
*(experimental: currently, only works in landscape with home button on the right)*
### install chillax into your hip new app
1. `npm install chillax`
2. `import Chillax from "chillax"` — *(it's a commonjs module)*
3. link in the stylesheet, `node_modules/chillax/dist/chillax-styles.css`
4. proceed to chillax usage instructions below
### install chillax the old fashioned way
1. download the chillax "global bundle" script, and stylesheet *(right-click save-as)*
- [chillax.global.bundle.js](https://raw.githubusercontent.com/chase-moskal/chillax/gh-pages/dist/chillax.global.bundle.js)
- [chillax-styles.css](https://raw.githubusercontent.com/chase-moskal/chillax/gh-pages/dist/chillax-styles.css)
2. load the chillax script and stylesheet onto your html page
```html
```
3. proceed to chillax usage instructions below
### chillax usage instructions
1. prepare your png image layers — use the template or listen carefully
- by default, chillax assumes your parallax scenes are `16:9` in aspect ratio,
you are expected to author all of your layer images at double-height (`16:18`).
this extra height provides 100% leeway for the parallax effects (otherwise your layers will look cut-off at some point)
- you should probably use the `psd` template in the images folder — `parallax-template.zip`
- the template shows that the viewport is a `16:9` window centered within the `16:18` image
- the template is at 4k resolution, but you should save-for-web at half size (`1920x2160`)
2. set up a chillax view on your html page
```html
```
- `[data-chillax]` defaults to `100` "leeway",
which is percentage of parallax sliding action allowable, relative to the height of the view
- `[data-chillax-layer]` specifies the `depth`,
where `0` is flush with the rest of the page,
`10` is sunken "fully" into the background,
and anything negative is popping out of the view toward the user
- 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
3. activate chillax on your views
```html
const chillax = new Chillax()
```