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
- Include the script.
<script type="text/javascript" src="delighters.js">
- Add delighter attributes
<div class="foo" data-delighter>
- 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;
}
- 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
- 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
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 ...
})