Delighters.JS – Add CSS animations to delight users as they scroll down

Nice little library by Martin Kool / Q42.

Delighters.js toggles classnames as you scroll. You do the rest!

The main class toggled is .delighter, with an extra .started or .ended to know if the animation just started or 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;
   }

Delighters.js →