vertical parallax engine for beautiful web presentations
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.vscode
images
source
.gitignore
.npmignore
.npmrc
.travis.yml
LICENSE
README.md
index.html
jest.config.json
package-lock.json
package.json
tsconfig.json

README.md

❄ — c h i l l a x — ❄

vertical parallax engine for beautiful web presentations

features

  • view the live chillax demo
  • 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)

  2. load the chillax script and stylesheet onto your html page

    <link rel="stylesheet" href="chillax-styles.css"/>
    
    <script src="chillax.global.bundle.js"></script>
  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

    <div data-chillax>
    	<img data-chillax-layer="10" src="background.png" alt=""/>
    	<img data-chillax-layer="5" src="midground.png" alt=""/>
    	<img data-chillax-layer="0" src="foreground.png" alt=""/>
    </div>
    • [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

    <script>
    	const chillax = new Chillax()
    </script>