利用wow.js实现页面滚动动画

让代码飞1926

已于 2023-07-10 10:23:30 修改

阅读量380

点赞数

分类专栏：问题和解决办法文章标签： javascript 开发语言 ecmascript

于 2023-06-21 11:46:42 首次发布

本文链接：https://blog.csdn.net/qq_40596257/article/details/131324875

版权

问题和解决办法专栏收录该内容

22 篇文章 0 订阅

订阅专栏

太过简单，贴出代码demo，在块级元素添加类名就好了

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" />

    <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;
      }
      *{
        margin: 0;
        padding: 0;
      }
      .box{
        background-color: #409eff;
        /* height: 100vh; */
      }
      .title {
        text-align: center;
        padding: 20px;
      }
      .top{
        width: 45%;
        height: 300px;
        background-color: #67c23a;
      }
      .box1{
        display: flex;
        justify-content: space-around;
      }
      .box2{
        margin-top: 20px;
        display: flex;
        justify-content: space-around;
      }
      .top2{
        width: 45%;
        height: 300px;
        background-color: #67c23a;
      }
    </style>
  </head>

  <body>
    <!-- <section class="container">
      <ul>
        <li class="wow animate__animated animate__bounceInLeft"></li>
        <li class="wow animate__animated animate__bounceInRight"></li>
        <li class="wow animate__animated animate__bounceIn"></li>
        <li class="wow animate__animated animate__bounceInUp"></li>
        <li class="wow animate__animated animate__bounceInDown"></li>
        <li class="wow animate__animated animate__slideInUp"></li>
        <li class="wow animate__animated animate__slideInDown"></li>
        <li class="wow animate__animated animate__slideInLeft"></li>
        <li class="wow animate__animated animate__slideInRight"></li>
        <li class="wow animate__animated animate__lightSpeedIn"></li>
        <li class="wow animate__animated animate__pulse"></li>
        <li class="wow animate__animated animate__flipInX"></li>
        <li class="wow animate__animated animate__flipInY"></li>
        <li class="wow animate__animated animate__bounce"></li>
        <li class="wow animate__animated animate__shake"></li>
        <li class="wow animate__animated animate__wobble"></li>
        <li class="wow animate__animated animate__rollIn"></li>
        <li
          class="wow animate__animated animate__fadeInUpBig"
          data-wow-delay="0.3s"></li>
        <li
          class="wow animate__animated animate__fadeInUpBig"
          data-wow-delay="0.6s"></li>
        <li
          class="wow animate__animated animate__fadeInUpBig"
          data-wow-delay="0.9s"></li>
        <li
          class="wow animate__animated animate__fadeInUpBig"
          data-wow-delay="1.2s"></li>
        <li
          class="wow animate__animated animate__animate__zoomOut"
          data-wow-delay="1.5s"></li>
      </ul>
    </section> -->
    <div class="box">
        <h2 class="title wow animate__animated animate__bounceInDown">标题</h2>
        <div class="box1">
            <div class="top wow animate__animated animate__bounceInLeft">
                <p style="text-align: center;" class="wow wow animate__animated animate__fadeInUpBig"
                data-wow-delay="0.3s">小标题</p>
            </div>
            <div class="top wow animate__animated animate__bounceInRight">
                <p style="text-align: center;" style="text-align: center;" class="wow wow animate__animated animate__fadeInUpBig"
                data-wow-delay="0.3s">小标题</p>
            </div>
        </div>
        <div class="box2">
            <div class="top2 wow animate__animated animate__bounceInDown"></div>
            <div class="top2 wow animate__animated animate__bounceInDown"></div>
        </div>
        <div class="box2">
            <div class="top2 wow animate__animated animate__bounceInLeft"></div>
            <div class="top2 wow animate__animated animate__bounceInRight"></div>
        </div>
        
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.js"></script>
    <script>
      new WOW().init();
    </script>
  </body>
</html>

类名-动画效果对应表“：

rollIn	从左到右、顺时针滚动、透明度从 100% 变化至设定值
bounceIn	从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从 100% 变化至设定值
bounceInUp	从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变
bounceInDown	从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变
bounceInLeft	从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变
bounceInRight	从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变
slideInUp	从下往上、上来后固定到设定位置、透明度为设定值不变（up 是从下往上）（如果元素在最下面，会撑开盒子高度）
slideInDown	从上往下、上来后固定到设定位置、透明度为设定值不变
slideInLeft	从左往右、上来后固定到设定位置、透明度为设定值不变（left 却是从左往右）
slideInRight	从右往左、上来后固定到设定位置、透明度为设定值不变
lightSpeedIn	从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从 100% 变化至设定值
pulse	原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳）
flipInX	原位置后仰前栽、透明度从 100% 变化至设定值
flipInY	原位置左右旋动、透明度从 100% 变化至设定值
bounce	上下抖动、透明度为设定值不变
shake	左右抖动、透明度为设定值不变
swing	从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变
bounceInUp	原位置不变、直接从不显示到显示（无过过渡效果）
wobble	原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变