mechAnimator

A jQuery Plugin

Move things in a silly manner.

Usage

Fade in and slide about content boxes on scroll. This plugin is very very very silly to the extent that it is nearly useless.

Demo

HTML

<div class="nothing">
    <p>Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going.</p>
</div>
<div class="fade-in">
    <p>Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going.</p>
</div>
<div class="to-right">
    <p>Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going.</p>
</div>
<div class="to-left">
    <p>Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going.</p>
</div>
<div class="from-top">
    <p>Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going.</p>
</div>
<div class="from-bottom">
    <p>Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going.</p>
</div>

Include Scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/mechanimator.js"></script>

Call Function Without Options

$('.nothing').mechAnimator();

Or Call Function With Options

$( '.fade-in' ).mechAnimator({
    effect: 'justFade',
    inViewport: 50
});
$('.to-right').mechAnimator({
    effect: 'toRight',
    inViewport: 100
});
$('.to-left').mechAnimator({
    effect: 'toLeft',
    inViewport: 10
});
$('.from-top').mechAnimator({
    effect: 'fromTop',
    inViewport: 150,
    speed: 1000
});
$('.from-bottom').mechAnimator({
    effect: 'fromBottom',
    inViewport: 150,
    speed: 1000
});

Options

The default effect is 'justFade' (fades in element). The default inViewport setting is 100 which will activate when the element is 100% in the viewport. Any percentage can be used. The opacity setting defaults to 0, and the speed setting defaults to 600. Options for the sliding effect are offsetStart and offsetEnd for the starting and ending positions of the element.

Variable	Default	Type	Description
effect	'justFade'	string	Defines the effect to be used on your element. Accepted values: 'justFade', 'toRight', 'toLeft', 'fromTop', 'fromBottom'.
inViewport	100	int	Percentage of element that will be in viewport when effect gets applied. Can be over 100. Do not include percent sign (%). Do not use negative numbers, instead use 0 to have the effect applied on load.
offsetStart	200	int	Defines where element starts when selecting a movement effect ('toRight', 'toLeft', 'fromTop', and 'fromBottom').
offsetEnd	0	int	Defines where element ends when selecting a movement effect ('toRight', 'toLeft', 'fromTop', and 'fromBottom').
opacity	0	int	Beginning opacity of your element before effect is applied.
speed	2000	int	Defines the speed of your animation.
easing	'ease-in-out'	string	Sets the easing effect with which element is animated.
throwEffectError	true	boolean	When 'effect' option is not set properly, the script will throw an error (see console) and stop executing. You can set this to false to have the script fallback to its default settings. Or just call the script with no options.

License

Licensed under the terms of the MIT license.

Notes

Built by Jeannie Stevenson using oxford commas, enthusiasm, and brains.