Need help with jquery-aniview?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jjcosgrove
204 Stars 52 Forks MIT License 26 Commits 8 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

No Data

jQuery AniView

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

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:


For maximum security you may also decide to:

Example:


Initialisation

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

Options

var options = {
    animateThreshold: 100,
    scrollPollInterval: 50
}
$('.aniview').AniView(options);

Option | Type | Description | Default ------------- | ------------- | ------------- | ------------- animateThreshold | int | +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 scrollPollInterval | int | The 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

Full Example

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

<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>
<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').AniView();
    });
</script>


<div>
    <p class="aniview" data-av-animation="slideInRight">
        This is my awesome animated element!
    </p>
</div>

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.