Delighters.JS

Add CSS animations to delight users as they scroll down.

A tiny javascript library by Q42
https://github.com/Q42/delighters

1. Include the script
2. Add data-delighter attributes
3. Write your own CSS delighters

Features

Usage

1. Include the script

   <script type="text/javascript" src="delighters.js">

2. Add delighter attributes

   <div class="foo" data-delighter>

3. Style the delighter (or its children) using built-in classes .started and .ended

   /* when the library loads, each [data-delighter] 
      gets the .delighter class */

   .foo.delighter {
      transition: all .3s ease-out;
      transform: translateX(-100%);
      opacity: 0;
   }

   /* the .started class is set when the top
      of [data-delighter] is at 0.75 of the viewport 
      (where 0 is top and 1 is bottom) */

   .foo.delighter.started {
      transform: none;
      opacity: 1;
   }

   /* an extra .ended state is set when the bottom 
      of [data-delighter] is at 0.75 of the viewport
      (where 0 is top and 1 is bottom) */

   .foo.delighter.started.ended {
      border: solid red 10px;
   }

How it works

Debugging

Customizing

By default, delighters.js intializes automatically when the DOM is ready, and with the following configuration:

  options = {
    attribute:  'data-delighter',
    classNames: ['delighter', 'started', 'ended'],
    start:      0.75, // default start threshold
    end:        0.75, // default end threshold
    autoInit:   true  // initialize when DOMContentLoaded
  }

You can customize any or all of the above properties using:

  Delighters.config({    
    // set the default start threshold at the bottom
    start: 1,
    // let's call Delighters.init() manually later
    autoInit: false 
    // ... etc ...
  })

Enjoy!