HeroMagic.js

A jQuery visual effects plugin for fades, slides, and transitions.

Requires jQuery, a child-like sense of wonder, and your good looks.

 

Magic Attributes for Intro Animations

Appear and move intro animated effects are applied using data- attributes. They look like this:

<p data-appear="[duration], [easing], [delay]">...</p>
<a data-move="[x],[y], [duration], [easing], [delay]">...</a>

...or in a more real example:

<!-- wait 100ms, then fade in over 300ms using the `ease-in-out` easing -->
<h1 data-appear="300ms, ease-in-out, 100ms">One</h1>

<!-- wait 500ms, then move up 20px over 300ms using the `ease-in-out` easing -->
<h2 data-move="-20px, 0, 300ms, ease-in-out, 500ms">Two</h2>

 

Magic Classes for Scrolling

The four effects fade in, fade out, scroll in, and scroll out are controlled by classes.

Class	Effect
.hm-fade-in	As this element moves away from the bottom of the viewport, it will fade in according to the scrollInDistance option
.hm-fade-out	As this element approaches the top of the viewport, it will fade out according to the scrollOutDistance option
.hm-scroll-in	As this element moves away from the bottom of the viewport, it will decelerate in according to the scrollInDistance option
.hm-scroll-out	As this element approaches the top of the viewport, it will accelerate out according to the scrollOutDistance option

Note: that all four of these classes are affected by the scrollCompressor option for configuring how aggressively the elements accelerate / decelerate.

 

Options

Option	Type	Default	Description
addStyles	bool	true	When true, HeroMagic will inject styles into the <head/> of the document. It is recommended that you include jquery.heromagic.css in your styles and set this option to false for better visual performance.
autoStart	boolean	true	If set to true, the appear and move animations will begin on the window.load event. If this is set to false you will need to programmatically invoke the animate() method to start the show.
debugScrollPoints	bool	false	If set to true, visual indicators of the scroll points used for .hm-fade-in, .hm-fade-out, .hm-scroll-in, and .hm-scroll-out will be shown.
defaults	object	(see below)	An object comprising of default options for _appear_s and _move_s.
defaults.appearDuration	string	"300ms"	The time it takes for an .appear class to appear.
defaults.appearEasing	string	"ease-in-out"	The easing function used for .appears.
defaults.appearDelay	string	"0ms"	The delay before appearing.
defaults.moveX	string	"0"	The movement of this element on the X axis.
defaults.moveY	string	"-20px"	The movement of this element on the Y axis.
defaults.moveDuration	string	"300ms"	The time it takes for a .move class to move.
defaults.moveEasing	string	"ease-in-out"	The easing function used for .moves.
defaults.moveDelay	string	"0ms"	The delay before moving.
positionOverrides	bool	true	A setting which will if true will change the display property of any element which HeroMagic touches. This will change a position value of static|fixed|initial|inherit to relative (position: absolute will remain unchanged).
scrollCompressor	float	0.2	Controls how aggressively the scroll-in|scroll-out|fade-in|fade-out is calculated. Lower numbers go slower, numbers closer to 1.0 start to become seizure-inducing.
scrollInDistance	int	80	The distance from the top of the viewport where scrolls + fades start to take effect.
scrollOutDistance	int	80	The distance from the bottom of the viewport where scrolls + fades start to take effect.