wow 滚动动画

Posted justsmile2

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了wow 滚动动画相关的知识,希望对你有一定的参考价值。

1.demo

技术图片
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <title>demo</title>
  <link rel="stylesheet" href="http://cdn.dowebok.com/98/css/animate.min.css">

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .wrap{
      margin: 50px auto;
      width: 300px;
      height: 200px;
      border:1px solid red;
    }
  </style>

</head>

<body>
  <div class="wrap wow bounceInLeft">hello</div>
  <div class="wrap wow bounceInLeft">hello</div>
  <div class="wrap wow bounceInLeft">hello</div>
  <div class="wrap wow bounceInLeft">hello</div>
  <div class="wrap wow bounceInLeft">hello</div>
  <div class="wrap wow bounceInLeft">hello</div>
  <div class="wrap wow bounceInLeft">hello</div>

  <script src="http://cdn.dowebok.com/131/js/wow.min.js"></script>
  <script>
    if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
      new WOW().init();
    };
  </script>

</body>

</html>
View Code

2. 相关链接

WOW.js – 让页面滚动更有趣

wow 

github

以上是关于wow 滚动动画的主要内容,如果未能解决你的问题,请参考以下文章

用wow.js实现页面滚动时触发animate.css动画特效

animate.css+wow.js页面滚动即时显示动画

Vue+wow.js+animate.css-实现页面滚动可视区域动画效果展示-案例

wow.js怎么每次鼠标下滑都加载动画

wow.js使用教程

ScrollReveal-元素随页面滚动产生动画的js插件