WOW.js轻松为网页添加动画切入效果

  由于坐忘的需要,经常会有部分功能用的很多,做起来又很繁琐,所以插件也就应运而生了。个人感觉正式js强大的可植入性,

才使他如此的使用火爆,反正博主是特别喜欢这一点  Y(^o^)Y~ 。

  今天就和大家分享几个比较实用的小插件,省的大家整理了。

  1.WOW.js轻松为网页添加动画切入效果

    这款插件作用很简单,及时实现网页中任意部分动画切入的效果。但是有2点要注意的地方

      (1)此动画是检测屏幕滚动条实现达到一定位置执行动画效果的,所以当指定元素开始显示的时候才会开始动画,这个用户可以设置

      (2)每个元素只能执行一种动画,不能同时实现多种动画一起播放的效果

    现在就来详细介绍一下这个插件如何使用,我们先来看一段代码,展示一下动画效果

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <link rel="stylesheet" type="text/css" href="css/animate.min.css" />        <style type="text/css">            div{                        width: 100px;                        height: 100px;                        background-color: yellow;                        margin: 50px;                    }        </style>    </head>    <body>        <div " data-wow-duration="3s">lightSpeedIn从右慢慢摇曳进入</div>            <div " data-wow-duration="3s">rollIn从左边旋转进入</div>            <div " data-wow-duration="3s">pulse变大</div>            <div " data-wow-duration="3s">flipInX绕y轴晃</div>            <div " data-wow-duration="3s">shake左右晃动</div>            <div " data-wow-duration="3s">swing吊在那要摇晃</div>            <div " data-wow-duration="3s">bounce原地上下抖动</div>            <div " data-wow-duration="3s">bounceInLeft从左方进来上下抖动</div>            <div " data-wow-duration="3s">bounceInRight从右方进来上下抖动</div>            <div " data-wow-duration="3s">bounceInDown从上方进来上下抖动</div>            <div " data-wow-duration="3s">bounceInUp从下方进来上下抖动</div>    </body>    <script language="JavaScript" src="js/jquery-1.10.2.js"></script>    <script language="JavaScript" src="js/wow.min.js"></script>  <script type="text/javascript">        /*初始化自动动画wow.min.js插件*/        new WOW().init();    </script></html>

    以下是代码的效果图:

    

    首先,介绍插件需要插入的文件初始化流程,因为这个插件是基于animate编写的,所以插入文件得注意一下

<link rel="stylesheet" type="text/css" href="css/animate.min.css" />.........<script language="JavaScript" src="js/jquery-1.10.2.js"></script><script language="JavaScript" src="js/wow.min.js"></script>
<script type="text/javascript">        /*初始化自动动画wow.min.js插件*/        new WOW().init();    </script>

    上述是简单的调用默认的样式,也可以自己 自定义动画:

var wow = new WOW({    boxClass: 'wow',    animateClass: 'animated',    offset: ,    mobile: true,    live: true});
    boxClass    填字符串    ‘wow’是需要执行动画的元素的 class名    animateClass    字符串    ‘animated’是animation.css 动画自带的 class名    offset    整数    0 表示目标元素距离可视区域多少开始执行动画    mobile    布尔值    true    是否在移动设备上执行动画    live    布尔值    true    异步加载的内容是否有效  接下来介绍一下动画播放的一些属性:    data-wow-duration="3s"   设置动画播放一次需要的时间    data-wow-delay="3s"   设置动画延迟多久开始执行    data-wow-iteration="5"   设置动画执行多少次  再介绍一下常用的几种默认动画样式:    lightSpeedIn:从右慢慢摇曳进入    rollIn:从左边旋转进入    pulse:变大    flipInX:绕x轴晃    shake:左右晃动    swing:吊在那要摇晃    bounce:原地上下抖动    bounceInLeft:从左方进来上下抖动    bounceInRight:从右方进来上下抖动    bounceInDown:从上方进来上下抖动    bounceInUp:从下方进来上下抖动  当然效果不止这些,比如说有flipInX,就有flipInY,但是没有绕Z轴转的哈。其他属性也是一样,都有很多的扩展,在这里就不一一列举了