Add CSS animations to delight users as they scroll down.

A tiny javascript library by Q42

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



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



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:

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