q42 / delighters

Add CSS animations to delight users as they scroll down.

Delighters

Add CSS animations to delight users as they scroll down. A tiny javascript library by Q42. It was written by Martin Kool.

See the demo here

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] element 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 class is set when the bottom of [data-delighter] element 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

• Delighters.js toggles classes when you scroll down. You do the rest!
• Each delighter gets a .started class when its top raises above 75% of the browser's viewport height
• When the bottom of the delighter is at 75%, an extra class .ended is added
• You can change any of these like so: data-delighter="start:0.5;end:0.95;
• Remember: 0 = top, 1 = bottom
• Values outside the viewport are allowed, such as start:1.2;end:-0.3

Debugging

• Set the data-delighter="debug" flag to enable debugging for that delighter
• This will give the delighter a red outline
• Also, a dotted red hint line is shown when the delighter is within the viewport
• The hint line is positioned at the defined start, which by default is 0.75
• The line is removed when the bottom of the delighter is above the end position, by default also 0.75

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 ...
  })

delighters's Issues

setting an image as background that fits parent and does not scroll

using the box delighter and setting an image as a background, the image is resized on the width axis, but not the height, leading the browser to scroll the image within the box.

Business Hospitality

...well, in all browsers save Firefox.

How can this be overcome?

Provide delighters.js via npm

Hey there 😊

First of all: great work, delighters.js is a really nice and very useful library!
Thanks for this!

AFAICS you currently need to download the script and add a <script> tag to your site, which is fine for very simple or legacy applications, but doesn't feel right in a modern environment using webpack or something similar.

Would it be possible to provide the module via npm, so that one can install it as a regular dependency? This would be great 👍

Feature request: animate in only

Using Delighters for the first time and loving the simplicity of just the class toggle that lets me control everything else. I think a good addition would be a config option to make the class changes be one-time actions, and not have the classes removed from elements when scrolling back up the page. That way once an element animates in, it's forever there.