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

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;
		}