
$ cat backi.yaml

scenes:
  - name: page-top
    position: 0
    style:
      backgroundColor: "#2e3440"

BACKI

Declaratively create beautiful scrolling backgrounds for your pages, using YAML and your imagination.


  - name: start-boxes-open
    position: 0.25
    style:
      backgroundColor: "#000000"
    sprites:
      box1:
        top: 0%
        left: 0%
        bottom: 0%
        right: 100%
        backgroundColor: "#8FBCBB"
        zIndex: 2
      box2:
        top: 0%
        left: 25%
        bottom: 0%
        right: 75%
        backgroundColor: "#88C0D0"
      box3:
        top: 0%
        left: 50%
        bottom: 0%
        right: 50%
        backgroundColor: "#81A1C1"
      box4:
        top: 0%
        left: 75%
        bottom: 0%
        right: 25%
        backgroundColor: "#5E81AC"

Scenes

Define scenes for you site's background, to enhance critical points and reveals, or to create gradual change as the user scrolls through.


  - name: boxes-fully-open
    position: 0.5
    sprites:
      box1:
        left: 0%
        right: 75%
        opacity: 1
      box2:
        left: 25%
        right: 50%
        opacity: 1
      box3:
        left: 50%
        right: 25%
        opacity: 1
      box4:
        left: 75%
        right: 0%
        opacity: 1

Sprites

Make your site dance, or just give it some more pop. Declaratively interpolate CSS properties for the positions or styles of anything you need.


- name: boxes-gone
    position: 0.75
    style:
      backgroundColor: "#000000"
    sprites:
      box1:
        bottom: 100%
        opacity: 0
      box2:
        left: 0%
        opacity: 0
      box3:
        right: 0%
        opacity: 0
      box4:
        top: 100%
        opacity: 0

  - name: page-bottom-clamp
    position: 0.98
    style:
      backgroundcolor: "#000000"

  - name: page-bottom
    position: 1
    style:
      backgroundcolor: "#eceff4"

sprites:
  box1:
    type: div
  box2:
    type: div
  box3:
    type: div
  box4:
    type: div

Customizability

Hook into Backi's interpolation with your own code. You can let Backi take care of scroll-dependent state for your components, or define your own custom interpolation algorithms to get exactly the result you want.

Contribute


$ git clone https://github.com/micahsgilbert/backi

Backi also makes easter eggs a lot more fun :)