使用wow.js让网页“动起来”

最新推荐文章于 2023-03-17 13:32:04 发布

小绵杨Yancy

最新推荐文章于 2023-03-17 13:32:04 发布

阅读量914

点赞数

分类专栏：前端文章标签： wow.js animation

本文链接：https://blog.csdn.net/ZHANGYANG_1109/article/details/121433079

版权

前端专栏收录该内容

25 篇文章 3 订阅

订阅专栏

wow.js

可以实现网页滑动到元素时，产生动画效果，但是目前只支持触发一次（页面不刷新的的情况下）。

引入animate.css和wow.js

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>

<script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.js"></script>

在需要产生动画的元素加入类

<li class="wow animate__animated animate__bounceInLeft"></li>

测试

以下代码可直接copy后运行：

<!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;
        }
    </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>

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