DEPRECATED - no longer actively maintained

Revealator

Revealator is a jQuery-based plugin for adding effects to elements that enter the window. It's simple, and easy to use. It also adds classes to the body tag to depending on the users scroll position in the document, e.g. at-top, at-bottom, near-top, near-bottom. You can see a demo here.

Usage

include in head:

<link rel="stylesheet" href="fm.revealator.jquery.css">
<script src="jquery-1.11.3.min.js"></script>
<script src="fm.revealator.jquery.js"></script>

example on usage:

<div class="revealator-zoomin">
	Some text or elements
</div>

<div class="revealator-fadein revealator-slideup revealator-once revealator-delay2 revealator-duration5">
	Some text or elements
</div>

Options (by example):

You can set these global options for the plugin

// Sets the padding of the scroll position, if within this area, the classes `near-top`/`near-bottom` are added.
<script type="text/javascript">
	Revealator.scroll_padding = '100';
</script>

// Sets the top and bottom offsets at which the effects are triggered.
<script type="text/javascript">
	Revealator.effects_padding = '-100';
</script>

Classes added (to elements):

The plugin adds classes to the elements depending on their position

Class	Description
revealator-position-below	Both the top and the bottom of the element are below the window view
revealator-position-partially-below	The top of the element is inside window view, but the bottom of the element is outside window view
revealator-position-within	The element is within the window view
revealator-position-partially-above	The top of the element is outside window view, but the bottom of the element is inside window view
revealator-position-above	Both the top and the bottom the element are above the window view

Only show the effect once

By adding the class revealator-once, the effect will only fire once. The plugin will lock to the position to revealator-position-within.

Only show the effect on load

By adding the class revealator-load, the effect will only fire on load.

Default effects, delays and durations:

The included stylesheet has some default css classes

Effects:

Class	Description
revealator-fade	Fade element in
revealator-rotateleft	Rotate slightly to the left and fade in element
revealator-rotateright	Rotate slightly to the right and fade in element
revealator-slideleft	Slide in from right to left and fade in element
revealator-slideright	Slide in from left to right and fade in element
revealator-slideup	Slide in from bottom to top and fade in element
revealator-zoomin	Zoom in and fade in element
revealator-zoomout	Zoom out and fade in element

Delays:

Class	Description
revealator-delay1	Set effect delay to 100ms
revealator-delay2	Set effect delay to 200ms
revealator-delay3	Set effect delay to 300ms
...	...
revealator-delay19	Set effect delay to 1900ms
revealator-delay20	Set effect delay to 2000ms

Durations:

Class	Description
revealator-duration1	Set effect duration to 100ms
revealator-duration2	Set effect duration to 200ms
revealator-duration3	Set effect duration to 300ms
...	...
revealator-duration19	Set effect duration to 1900ms
revealator-duration20	Set effect duration to 2000ms
You can also use revealator-speed##

Custom effects:

You can also easily make your own animations, e.g. (revealator- is optional):

Here we make a skew right effect

Stylus:

.revealator-skewright
	transform skew(35deg, 0deg)
	opacity 0
	transition all 600ms
	&.revealator-within
	&.revealator-partially-above
	&.revealator-above
		transform skew(0deg, 0deg)
		opacity 1

CSS:

.revealator-skewright {
	transform: skew(35deg, 0deg);
	opacity: 0;
	transition: all 600ms;
}
.revealator-skewright.revealator-within,
.revealator-skewright.revealator-partially-above,
.revealator-skewright.revealator-above {
	transform: skew(0deg, 0deg);
	opacity: 1;
}