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

最新推荐文章于 2025-04-25 14:59:12 发布

yu_wen_

最新推荐文章于 2025-04-25 14:59:12 发布

阅读量656

点赞数

CC 4.0 BY-SA版权

分类专栏： Web

本文链接：https://blog.csdn.net/yu_wen_/article/details/112873537

Web 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了如何结合WOW.js和animate.css在页面滚动时创建动画效果。首先，提供了两个库的官网链接以及cdn和本地引用方式。接着，提到需要在CSS中设置`.wow`的初始状态为`visibility: hidden;`。然后，详细阐述了HTML中使用data属性来配置动画效果，如duration、delay、offset和interaction。最后，提到了可以通过初始化WOW.js来自定义设置动画属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wow官网：https://www.delac.io/wow/

animate官网：https://animate.style/

一、引用

cdn引用

<head>
     <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>
</head>

或本地引用

本地资源下载

<script src="js/wow.min.js" type="text/javascript" charset="utf-8"></script>
<link href="css/animate.css" rel="stylesheet">

记得加上这个css

.wow {

visibility: hidden;

}

初始化

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

二、 html

.wow{
		background-color: rebeccapurple;
		width: 100%;
		height: 50px;
		margin: 1000px 0;
	}
<div class="wow fadeInUp" data-wow-duration="2s" data-wow-delay="0.5s"></div>

三、相关属性：

wow.js的data-wow-duration（动画持续时间）

data-wow-delay（动画延迟时间）

data-wow-offset（距离开始动画(浏览器底部)）

data-wow-interation（动画重复的次数）

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section>

<section class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></section>

四、自定义设置：

在初始化wow的时候的自定义设置属性：

wow = new WOW(
       {
        boxClass:     'wow',      // 动画的class 默认值是wow；
        animateClass: 'animated', // 为animate.css触发css动画的库；
        offset:       0,          // 当元素与浏览器窗口有多少交叉的时候动画会出现，数值越大越难出现默认值是0，即有任何交叉就会出现；
        mobile:       true,       // 如果设为false则在手机端不显示动画效果 默认为true；
        live:         true        // 默认为true 持续检查页面中是否有用于wow动画样式的元素 如果设为false那么在页面加载之后再用js添加的wow样式将不会有动画效果 默认值为true；
           }
) wow.init();