wow.js搭配animate.css的基本使用

最新推荐文章于 2024-03-27 16:46:35 发布

ChenCh.

最新推荐文章于 2024-03-27 16:46:35 发布

阅读量557

点赞数

文章标签： css javascript css3

本文链接：https://blog.csdn.net/weixin_49274461/article/details/123402432

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <style>
        div{
            width: 800px;
            height: 300px;
            margin: 400px;
            background-color: #1e9fff;
        }
    </style>
</head>
<body>
<div class="wow animate__backInLeft"  data-wow-duration="5s" data-wow-delay="3s"></div>
<div class="wow animate__backInRight" data-wow-offset="100" data-wow-iteration="10"></div>
<div class="wow animate__backInUp"></div>
<div class="wow animate__fadeInUp"></div>
<script type="text/javascript" src="./animate/wow.min.js"></script>

<script>
    /**
     * wow简单使用：
     *    这里的动画选用animate.css来操作
     *    
     *    1.标签属性介绍：
     *              data-wow-duration  :动画完成所消耗的事件
     *              data-wow-delay     :动画延时多久开始执行
     *              data-wow-offset    :盒子显示多少高度后开始执行动画
     *              data-wow-iteration :动画执行的次数
     *     2.初始化属性介绍：
     *            boxClass       :什么类名的盒子需要执行动画
     *            animateClass   :需要执行的动画，的必要前缀（比如说animate.css要执行动画就要带上animate__animated + 要执行的动画类名）
     *            offset         :偏移位（和标签的那个offset一致） number
     *            mobile         :在手机上是否执行动画            true/false
     *            live           :对异步加载的内容进行操作         true/false
     *            callback       :每当某个盒子执行动画，都会执行函数 function
     *            scrollContainer:可选滚动容器选择器，否则使用窗口   盲猜传入容器唯一标识，或者直接获取容器传进去
     */
    const wow = new WOW({
        boxClass: "wow",
        animateClass: "animate__animated"
    });
    wow.init()
</script>
</body>
</html>

wow.js文档：Reveal Animations When Scrolling — WOW.js

animate.css文档：Animate.css | A cross-browser library of CSS animations.

ChenCh.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
wow.js搭配animate.css的基本使用

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http.
复制链接

扫一扫