查看: 50|回复: 0

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

[复制链接]

24

主题

24

帖子

140

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
140
发表于 2019-6-30 18:53:49 | 显示全部楼层 |阅读模式
 1.WOW.js轻松为网页添加动画切入效果
              这款插件作用很简单,及时实现网页中任意部分动画切入的效果。但是有2点要注意的地方
      (1)此动画是检测屏幕滚动条实现达到一定位置执行动画效果的,所以当指定元素开始显示的时候才会开始动画,这个用户可以设置
      (2)每个元素只能执行一种动画,不能同时实现多种动画一起播放的效果
    现在就来详细介绍一下这个插件如何使用,我们先来看一段代码,展示一下动画效果
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         
  7.         <link rel="stylesheet" type="text/css" href="css/animate.min.css" />
  8.         <style type="text/css">
  9.             div{
  10.                         width: 100px;
  11.                         height: 100px;
  12.                         background-color: yellow;
  13.                         margin: 50px;
  14.                     }
  15.         </style>
  16.     </head>
  17.     <body>
  18.         <div class="wow lightSpeedIn col-md-3" data-wow-iteration="5" data-wow-duration="3s">lightSpeedIn从右慢慢摇曳进入</div>
  19.             <div class="wow rollIn col-md-3" data-wow-iteration="5" data-wow-duration="3s">rollIn从左边旋转进入</div>
  20.             <div class="wow pulse col-md-3" data-wow-iteration="5" data-wow-duration="3s">pulse变大</div>
  21.             <div class="wow flipInX col-md-3" data-wow-iteration="5" data-wow-duration="3s">flipInX绕y轴晃</div>
  22.             <div class="wow shake col-md-3" data-wow-iteration="5" data-wow-duration="3s">shake左右晃动</div>
  23.             <div class="wow swing col-md-3" data-wow-iteration="5" data-wow-duration="3s">swing吊在那要摇晃</div>
  24.             <div class="wow bounce col-md-3" data-wow-iteration="5" data-wow-duration="3s">bounce原地上下抖动</div>
  25.             <div class="wow bounceInLeft col-md-3" data-wow-iteration="5" data-wow-duration="3s">bounceInLeft从左方进来上下抖动</div>
  26.             <div class="wow bounceInRight col-md-3" data-wow-iteration="5" data-wow-duration="3s">bounceInRight从右方进来上下抖动</div>
  27.             <div class="wow bounceInDown col-md-3" data-wow-iteration="5" data-wow-duration="3s">bounceInDown从上方进来上下抖动</div>
  28.             <div class="wow bounceInUp col-md-3" data-wow-iteration="5" data-wow-duration="3s">bounceInUp从下方进来上下抖动</div>
  29.     </body>
  30.     <script language="JavaScript" src="js/jquery-1.10.2.js"></script>
  31.     <script language="JavaScript" src="js/wow.min.js"></script>
  32.   <script type="text/javascript">
  33.         /*初始化自动动画wow.min.js插件*/
  34.         new WOW().init();
  35.     </script>
  36. </html>
复制代码
以下是代码的效果图:


    首先,介绍插件需要插入的文件初始化流程,因为这个插件是基于animate编写的,所以插入文件得注意一下
  1. <link rel="stylesheet" type="text/css" href="css/animate.min.css" />
  2. .........
  3. <script language="JavaScript" src="js/jquery-1.10.2.js"></script>
  4. <script language="JavaScript" src="js/wow.min.js"></script>
复制代码
  1. <script type="text/javascript">
  2.         /*初始化自动动画wow.min.js插件*/
  3.         new WOW().init();
  4.     </script>
复制代码
 上述是简单的调用默认的样式,也可以自己 自定义动画:
  1. var wow = new WOW({
  2.     boxClass: 'wow',
  3.     animateClass: 'animated',
  4.     offset: 0,
  5.     mobile: true,
  6.     live: true
  7. });
复制代码
 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轴转的哈。其他属性也是一样,都有很多的扩展,在这里就不一一列举了

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表