1.5.0 • Published 8 years ago

mechanimator v1.5.0

Weekly downloads
1
License
MIT
Repository
github
Last release
8 years ago

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.

VariableDefaultTypeDescription
effect'justFade'stringDefines the effect to be used on your element. Accepted values: 'justFade', 'toRight', 'toLeft', 'fromTop', 'fromBottom'.
inViewport100intPercentage 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.
offsetStart200intDefines where element starts when selecting a movement effect ('toRight', 'toLeft', 'fromTop', and 'fromBottom').
offsetEnd0intDefines where element ends when selecting a movement effect ('toRight', 'toLeft', 'fromTop', and 'fromBottom').
opacity0intBeginning opacity of your element before effect is applied.
speed2000intDefines the speed of your animation.
easing'ease-in-out'stringSets the easing effect with which element is animated.
throwEffectErrortruebooleanWhen '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.

animationcssjqueryjquery-pluginecosystem:jquery
@infinitebrahmanuniverse/nolb-mec@everything-registry/sub-chunk-2149
1.5.0

8 years ago