WOW.js插件在页面滚动时展现动感的元素动画效果

第一种方式：向上滚动方式

HTML代码为：

<script src="static/js/wow.min.js"></script>
<link href="static/animate.min.css" rel="stylesheet" type="text/css" />
<script>
 var wow = new WOW({boxClass: 'deanactions',});wow.init();
</script>
<div class="deantese">
          <div class="w1180">
              <div class="deanpubtitles deanactions fadeInUp">
                   <h5>会员权益</h5>
                   <p>现在加入我们的会员，立享折扣价！在这里找到自己的学习同路人，和小伙伴一起学习、交流是一件让人兴奋的事！</p>
                </div>
              <div class="deantesebox">
                  <ul>
                     <li class="deanactions deanactions_one fadeInUp" data-wow-delay="0.2s">
                          <a href="#" target="_blank">
                              <div class="deanicons deanicons1"></div>
                                <h2>免费制定个性化学习方案</h2>
                                <p>会员可以享有我们免费<br />制定的个性化学习方案</p>
                            </a>
                        </li>
                        <li class="deanactions deanactions_two fadeInUp" data-wow-delay="0.3s">
                          <a href="#" target="_blank">
                              <div class="deanicons deanicons2"></div>
                                <h2>线上线下课程9.8折优惠</h2>
                                <p>加入会员，您能以9.8折优惠报名全部<br />课程（特价除外及不与其他优惠共享）</p>
                            </a>
                        </li>
                        <li class="deanactions deanactions_three fadeInUp" data-wow-delay="0.4s">
                          <a href="#" target="_blank">
                              <div class="deanicons deanicons3"></div>
                                <h2>专享在线答疑与辅导</h2>
                                <p>会员可以享受和导师在线<br />答疑与课后辅导的服务</p>
                            </a>
                        </li>
                        <li class="deanactions deanactions_four fadeInUp" data-wow-delay="0.5s">
                          <a href="#" target="_blank">
                              <div class="deanicons deanicons4"></div>
                                <h2>细致专业的服务</h2>
                                <p>学完课程后，我们会对您定<br />期复训，培养成为明星学员</p>
                            </a>
                        </li>
                        <div class="clear"></div>
                    </ul>
                </div>
            </div>
        </div>

本地效果为:http://svn.chenhua.cc/project/zhaoshang/zhaosheng_index.html

线上效果为：http://www.jq22.com/jquery-info1705

 

 

 

使用方法：

1、引入文件

<link rel="stylesheet" href="css/animate.min.css">

2、HTML

<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>

可以加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）属性，如：

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div>

3、JavaScript

new WOW().init();

如果需要自定义配置，可如下使用：

var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init();

 

配置

属性/方法	类型	默认值	说明
boxClass	字符串	‘wow’	‘wow’需要执行动画的元素的 class
animateClass	字符串	‘animated’	‘animated’animation.css 动画的 class
offset	整数	0	距离可视区域多少开始执行动画
mobile	布尔值	true	是否在移动设备上执行动画
live	布尔值	true	异步加载的内容是否有效