页面滚动时动态为元素添加class的jQuery插件

jquery.scrollAnimations是一款页面滚动时动态为元素添加class的jQuery插件。它结合animate.css来使用，可以为元素进入浏览器视口时添加炫酷的动画特效。

使用方法

在页面中引入jQuery和jquery.scrollAnimations.js文件。

<script type="text/javascript" src="jquery.min.js"></script>                    
<script type="text/javascript" src="jquery.scrollAnimations.js"></script>                    
                

HTML结构

例如要制作一个单元素的动画，可以使用下面的HTML结构。

<h1 data-animation="fadeInUp">Heading 1</h1>
                

如果要制作一组元素的动画，可以使用下面的HTML结构。

<section data-animation-container>
    <div class="container">
        <div class="row">

            <div class="col-sm-6"
                 data-animation-child data-animation="fadeInUp"
                 data-animation-delay="0ms">
                [Something to animate in]
            </div>

            <div class="col-sm-6"
                 data-animation-child data-animation="fadeInUp"
                 data-animation-delay="500ms">
                [Something else to animate in]
            </div>

        </div>
    </div>
</section>
                

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化该jquery插件。

var $containers = $('[data-animation]:not([data-animation-child]), [data-animation-container]');
$containers.scrollAnimations();
                

配置参数

offset：元素距离视口多少时，开始执行动画。浮点数，默认值为0.8，表示距离浏览器窗口顶部80%。

例如：

$('[data-animation]').scrollAnimations({
    offset: 0.5
});
                

该页面滚动时动态为元素添加class的jQuery插件的github地址为：https://github.com/mindgruve/jquery.scrollAnimations