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.
Failed to load latest commit information.

❄ — c h i l l a x — ❄

vertical parallax engine for beautiful web presentations


  • 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=""></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 —
    • 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=""/>
    • [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

    	const chillax = new Chillax()