jQuery页面滚动元素进入视口发生动画特效插件 A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view.

jQuery AniView

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

jQuery AniView is a minimal (~1KB) jQuery plugin that allows you to add animations to your webpages with nothing more than a class identifier and a single data attribute. There are also a couple of optional... options.

Scroll down to see how it works!

Initialisation:

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

Options:

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

Option	Type	Description	Default
animateThreshold	int	+ve numbers delay the animation sequence until the specified number 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 the user scrolling is 'polled' i.e. tested. This is in milliseconds (ms) and is an extension jQuery's in-built 'scroll' event/handler.	20

Markup:

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

As you scroll down the page, each animation is triggered when the threshold is met. i.e. when it comes into view by way of the bottom of the user's screen (viewport).

Since it uses the freakin awesome animate.css - it supports all of the same animations that it does.

All you have to do is simply declare what you want to use via the av-animation attribute.

You could even set up some custom animation classes so that animations occur in a specific order, e.g:

.fast {
    -vendor-animation-duration: 1s;
    -vendor-animation-delay: 0s;
}
.slow {
    -vendor-animation-duration: 3s;
    -vendor-animation-delay: 1s;
}
.reallyslow {
    -vendor-animation-duration: 6s;
    -vendor-animation-delay: 3s;
}

That should be enough to get you up and running! Check it out!