wow动画


<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>WOW Demo</title>
  <link rel="stylesheet" href="css/libs/animate.css">
  <link rel="stylesheet" href="css/site.css">
  <style>
    .wow:first-child {
      visibility: hidden;
    }
  </style>
  <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>

<body>
  <div id="container">
    <header>
      <h1>WOW.js Demo</h1>
    </header>
    <div id="main">
      <!-- 
          wow rollIn    从左到右、顺时针滚动、透明度从100%变化至设定值
            
          wow bounceIn    从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值
          wow bounceInUp    从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变
          wow bounceInDown    从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变
          wow bounceInLeft    从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变
          wow bounceInRight    从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变
            
          wow slideInUp    从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度）
          wow slideInDown    从上往下、上来后固定到设定位置、透明度为设定值不变
          wow slideInLeft    从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右）
          wow slideInRight    从右往左、上来后固定到设定位置、透明度为设定值不变
            
          wow lightSpeedIn    从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值
          wow pulse    原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳）
          wow flipInX    原位置后仰前栽、透明度从100%变化至设定值
          wow flipInY    原位置左右旋动、透明度从100%变化至设定值
          wow bounce    上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
          wow shake    左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
          wow swing    从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变
          wow bounceInU    原位置不变、直接从不显示到显示（无过过渡效果）
          wow wobble    原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变
        -->
      <section class="wow zoomOutDown" style="background-color: #f1c40f;" data-wow-iteration="infinite" data-wow-delay="1s"></section>
      <section class="wow pulse" style="background-color: #e74c3c;" data-wow-iteration="infinite" data-wow-duration="1500ms"></section>
      <section class="section--purple wow slideInRight" data-wow-delay="1s"></section>
      <section class="section--blue wow bounceInLeft" data-wow-offset="300"></section>
      <section class="section--green wow slideInLeft" data-wow-duration="4s"></section>
      <!-- 
        data-wow-duration：更改动画持续时间
        data-wow-delay：动画开始前的延迟
        data-wow-offset：开始动画的距离（与浏览器底部相关）
        data-wow-iteration：动画的次数重复
       -->
    </div>
  </div>
  <script src="dist/wow.js"></script>
  <script>
    wow = new WOW(
    {
      animateClass: 'animated', //触发CSS动画的类名
      boxClass: 'wow', //动画元素css类（默认是哇） 
      offset: 100, //显示到底部距离
      mobile: true, //触发移动设备上的动画（默认为true） 
      live: true, //对异步加载的内容执行操作（默认为true）
      scrollContainer: 'window', //可选的滚动容器选择器，否则使用window
      callback: function(box) {
        //每次动画启动时都会触发回调
        //传入的参数是动画的DOM节点
        console.log(box)
      }
    });
    wow.init(); //初始化
  </script>
</body>

</html>
评论 (0)
