Revealator is a jQuery-based plugin for adding effects to elements that enter the window. It's simple, and easy to use.
Clone or download
Latest commit 53319f4 Nov 2, 2017

README.md

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