wow.js+animate.css实现滚动加载动画

迅雷官网有这种效果： 迅雷网络-关于我们迅雷是全球领先的共享计算与区块链技术创新企业，公司成立于2003年，基于深耕十几年、获得国际专利的P2SP下载加速技术优势，面向个人用户和企业用户打造了丰富的下载加速、区块链、云计算、影音娱乐等产品及服务，为超过4亿用户创造了高效、智能、安全的互联网体验。icon-default.png?t=M85Bhttps://www.xunlei.com/v2018/dist/aboutus.html

参考：Animate.css+wow.js实现页面滚动到可视区显示动画效果_百事可口的博客-CSDN博客_animate.css wow今天看迅雷官网 https://www.xunlei.com/v2018/dist/aboutus.html实现的滚动到可视区域后显示动画，自己之前没做过这种，非常感兴趣，然后问小伙伴，大部分都没做过类似的，于是乎我只能自己查了第一想到的是swiper，之前写轮播图用过。https://www.swiper.com.cn/https://www.swiper.com.cn/usage/animate/index.html但是引入了之后 发现不是特别适合我 而且还有5版本6版本一系列写法兼容问https://blog.csdn.net/qq_38594056/article/details/121081566animate动画演示：animate.css动画演示_dowebokicon-default.png?t=M85Bhttps://www.dowebok.com/demo/2014/98/

wow.js依赖animate.css，不需要jquery；

cdn：wow (v1.1.2) – Reveal CSS animation as you scroll down a page | BootCDN – Bootstrap 中文网开源项目免费 CDN 加速服务Reveal CSS animation as you scroll down a pagehttps://www.bootcdn.cn/wow/

引入animate.css

<link href="http://www.bbsxiaomi.com/case/css/animate.min.css" rel="stylesheet">

加入wow.js 

<script src="http://www.bbsxiaomi.com/js/wow.min.js"></script>

初始化

<script>
　　　　new WOW().init();
</script>

 如果在vue2中，需在mounted中写：

<script>
export default {
  mounted() {
    new WOW().init();
  },
};
</script>

data-wow-duration : 动画持续时间，时间越久动画越慢 例如 1s 
data-wow-delay ： 延迟 时间越久动画越迟出现 例如 1s 
data-wow-offset ：动画开始的距离，根据浏览器窗口底部框 当设置大的时候意味着动画更难出现 例如10意味着元素内容有10在浏览器中才会出现动画。默认值为0 
data-wow-iteration ：动画重复次数 设为 infinite 时会持续不停重复 也可以设置整数
 

html+CSS 示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用wow做的项目</title>
 <link href="http://www.bbsxiaomi.com/case/css/animate.min.css" rel="stylesheet">
    <style>
    .container{
        width:800px;
        margin:0 auto;
    }
    .container ul{
        display:flex;
        display:-webkit-flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .container ul li{
        width:300px;
        height:300px;
        margin-bottom:40px;
        list-style:none;
        border-radius:50%;
        text-align:center;
        vertical-align:middle;
        align-items: center;
        line-height:300px;
        background-color:pink;
    }
    .container ul li:nth-child(4n){
        background-color:#409EFF;
    }
    .container ul li:nth-child(4n+1){
        background-color:#67C23A;
    }
    .container ul li:nth-child(4n+2){
        background-color:#E6A23C;
    }
    </style>
</head>
<body>
<section class="container">
    <ul>
        <li class="wow bounceInLeft">啊啊啊</li>
        <li class="wow bounceInRight"></li>
        <li class="wow bounceIn"></li>
        <li class="wow bounceInUp"></li>
        <li class="wow bounceInDown"></li>
        <li class="wow slideInUp"></li>
        <li class="wow slideInDown"></li>
        <li class="wow slideInLeft"></li>
        <li class="wow slideInRight"></li>
        <li class="wow lightSpeedIn"></li>
        <li class="wow pulse"></li>
        <li class="wow flipInX">哦哦哦</li>
        <li class="wow flipInY"></li>
        <li class="wow bounce"></li>
        <li class="wow shake"></li>
        <li class="wow wobble"></li>
        <li class="wow rollIn"></li>
        <li class="wow fadeInUpBig" data-wow-delay="0.3s"></li>
        <li class="wow fadeInUpBig" data-wow-delay="0.6s">呃呃呃</li>
        <li class="wow fadeInUpBig" data-wow-delay="0.9s"></li>
        <li class="wow fadeInUpBig" data-wow-delay="1.2s"></li>
        <li class="wow fadeInUpBig" data-wow-delay="1.5s"></li>
    </ul>
</section>
<script src="http://www.bbsxiaomi.com/js/wow.min.js"></script>
<script>
  new WOW().init();
</script>
</body>
</html>

vue2示例

 效果类似于这种：迅雷网络-关于我们迅雷是全球领先的共享计算与区块链技术创新企业，公司成立于2003年，基于深耕十几年、获得国际专利的P2SP下载加速技术优势，面向个人用户和企业用户打造了丰富的下载加速、区块链、云计算、影音娱乐等产品及服务，为超过4亿用户创造了高效、智能、安全的互联网体验。icon-default.png?t=M85Bhttps://www.xunlei.com/v2018/dist/aboutus.html

<!--home.vue-->
<template>
  <div class="container">
    <div class="page1">
      <h2 class="wow fadeInUp" data-wow-duration="0.5s">关于我们</h2>
    </div>
    <div class="page2">
      <div class="test_left">
        <h3
          style="line-height: 90px; font-size: 30px"
          class="wow fadeInUp"
          data-wow-offset="200"
          data-wow-duration="1s"
        >
          公司简介
        </h3>
        <p
          style="line-height: 40px"
          class="wow fadeInUp"
          data-wow-offset="150"
          data-wow-duration="1s"
        >
          COMPANY PROFILE
          深圳市迅雷网络技术有限公司（纳斯达克股票代码：XNET）成立于2003年，是全球领先的共享计算与区块链技术创新企业，同时也是中国用户数领先，历史悠久的互联网品牌之一。
          迅雷基于深耕十几年、获得国际专利的P2SP下...
        </p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  mounted() {
    new WOW().init();
  },
};
</script>
<style lang="scss" scoped>
.container {
  width: 100vw;
  .page1 {
    background: url("https://www.xunlei.com/v2018/dist/banner01.jpg?h=445192")
      no-repeat;
    height: 618px;
    width: 100%;
    h2 {
      width: 100%;
      padding-top: 260px;
      text-align: center;
      font-size: 48px;
      font-weight: lighter;
      letter-spacing: 8px;
    }
  }

  .page2 {
    background: url(https://www.xunlei.com/v2018/dist/banner02.jpg?h=969d69)
      no-repeat;
    position: relative;
    height: 600px;

    .test_left {
      display: inline-block;
      width: 600px;
      height: 400px;
      background-color: rgba(0, 0, 0, 0.631);
      border-radius: 10px;

      padding: 30px;
      position: absolute;
      margin-top: 60px;
      margin-left: 60px;
    }
  }
}
</style>

 附上animated的各个动画class属性

fade: {
        title: '淡入淡出',
        fadeIn: '淡入',
        fadeInDown: '向下淡入',
        fadeInDownBig: '向下快速淡入',
        fadeInLeft: '向右淡入',
        fadeInLeftBig: '向右快速淡入',
        fadeInRight: '向左淡入',
        fadeInRightBig: '向左快速淡入',
        fadeInUp: '向上淡入',
        fadeInUpBig: '向上快速淡入',
        fadeOut: '淡出',
        fadeOutDown: '向下淡出',
        fadeOutDownBig: '向下快速淡出',
        fadeOutLeft: '向左淡出',
        fadeOutLeftBig: '向左快速淡出',
        adeOutRight: '向右淡出',
        fadeOutRightBig: '向右快速淡出',
        fadeOutUp: '向上淡出',
        fadeOutUpBig: '向上快速淡出'
      },
      bounce: {
        title: '弹跳类',
        bounceIn: '弹跳进入',
        bounceInDown: '向下弹跳进入',
        bounceInLeft: '向右弹跳进入',
        bounceInRight: '向左弹跳进入',
        bounceInUp: '向上弹跳进入',
        bounceOut: '弹跳退出',
        bounceOutDown: '向下弹跳退出',
        bounceOutLeft: '向左弹跳退出',
        bounceOutRight: '向右弹跳退出',
        bounceOutUp: '向上弹跳退出'
      },
      zoom: {
        title: '缩放类',
        zoomIn: '放大进入',
        zoomInDown: '向下放大进入',
        zoomInLeft: '向右放大进入',
        zoomInRight: '向左放大进入',
        zoomInUp: '向上放大进入',
        zoomOut: '缩小退出',
        zoomOutDown: '向下缩小退出',
        zoomOutLeft: '向左缩小退出',
        zoomOutRight: '向右缩小退出',
        zoomOutUp: '向上缩小退出'
      },
      rotate: {
        title: '旋转类',
        rotateIn: '顺时针旋转进入',
        rotateInDownLeft: '从左往下旋入',
        rotateInDownRight: '从右往下旋入',
        rotateInUpLeft: '从左往上旋入',
        rotateInUpRight: '从右往上旋入',
        rotateOut: '顺时针旋转退出',
        rotateOutDownLeft: '向左下旋出',
        rotateOutDownRight: '向右下旋出',
        rotateOutUpLeft: '向左上旋出',
        rotateOutUpRight: '向右上旋出'
      },
      flip: {
        title: '翻转类',
        flipInX: '水平翻转进入',
        flipInY: '垂直翻转进入',
        flipOutX: '水平翻转退出',
        flipOutY: '垂直翻转退出'
      },
      strong: {
        title: '强调类',
        bounce: '弹跳',
        flash: '闪烁',
        pulse: '脉冲',
        rubberBand: '橡皮筋',
        shake: '左右弱晃动',
        swing: '上下摆动',
        tada: '缩放摆动',
        wobble: '左右强晃动',
        jello: '拉伸抖动'
}

各种class类名的动画效果

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 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

 

版权声明：本文为qq_40323256原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。