ja

jquery-aniview

A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view.

Showing:

Popularity

Downloads/wk

829

GitHub Stars

209

Maintenance

Last Commit

2mos ago

Contributors

4

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

jQuery AniView

A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view. Now supports v4.x of animate.css

Demo

http://jjcosgrove.github.io/jquery-aniview/

Installation (via npm)

npm install jquery-aniview

CDN

Instead of a local installation you may request a remote copy of jQuery AniView from unpkg CDN.

To request the latest version, use the following:

<script src="https://unpkg.com/jquery-aniview/dist/jquery.aniview.js"></script>

For maximum security you may also decide to:

Example:

<script src="https://unpkg.com/jquery-aniview@1.0.3/dist/jquery.aniview.js" integrity="sha384-uvboBeyPkVGldyoicVJST1JEAbxI2W0lG2fFOyGvahZrC4jWiv0vmryxw9NXIEn6" crossorigin="anonymous"></script>

Initialisation

$('.aniview').AniView();

Options

var options = {
    animateClass: 'animated',
    animateThreshold: 100,
    scrollPollInterval: 50
}
$('.aniview').AniView(options);
OptionTypeDescriptionDefault
animateClassstringthe animate.css class to use: 'animated' enables v3.x support and 'animate__animated' to enable v4.x supportanimated
animateThresholdint+ve numbers delay the animation sequence until the specified number of pixels have come into view. -ve numbers will trigger the animation sequence prior to the element coming into view.0
scrollPollIntervalintThe frequency at which user scrolling is 'polled' i.e. tested. This is in milliseconds (ms) and is an extension to jQuery's in-built 'scroll' event/handler.20

Markup v3

<div class="aniview" data-av-animation="slideInRight"></div>

Markup v4

<div class="aniview" data-av-animation="animate__jackInTheBox"></div>

Full Example

A typical working example (minimal) might look something like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My AniView Page</title>
    <!-- use the correct 'animateClass' option for your version! -->
    <link type="text/css" rel="stylesheet" href="animate.css">
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.aniview.js"></script>
    <script>
        $(document).ready(function(){
            $('.aniview-v3').AniView();
            $('.aniview-v4').AniView({
                animateClass: 'animate__animated'
            });
        });
    </script>
</head>
<body>
    <div>
        <p class="aniview-v3" data-av-animation="slideInRight">
            This is my awesome animated element using v3!
        </p>
        <p class="aniview-v4" data-av-animation="animate__jackInTheBox">
            This is my awesome animated element using v4!
        </p>
    </div>
</body>
</html>

Notes

Any element already in the viewport when the user loads the page will have it's animation triggered immediately if one has been set. In other words, it will not wait for the user to begin scrolling before initiating the animation on these elements.

Contribute

Bugs or feature requests/contributions can be done via:

https://github.com/jjcosgrove/jquery-aniview/issues

Authors

  • Just me for now.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100