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