使用wow.js给页面添加动画

wow.js下载地址
animate组件库

1.全局引入

<link rel="stylesheet" href="/animate.min.css">
<script src="/wow.js"></script>

2.简单挂载

new WOW({
    
    
    offset:0
}).init();

设置wow可以如下js设置

let wow = new WOW({
    
    
        boxClass: "wow", // 动画元素css类（默认为wow）
        animateClass: "animated", // 动画css类（默认为动画）
        offset: 0, // 触发动画时到元素的距离（默认值为0）
        mobile: true, // 在移动设备上触发动画（默认为true）
        live: true, // 对异步加载的内容执行操作（默认值为true）
        callback: function (box) {
    
    
          // console.log(box,"box");
        },
        scrollContainer: null,//滚动容器
});
wow.init();

设置wow可以如下html设置

<div class="wow animate__fadeInUp" data-wow-duration="0.5s" data-wow-delay="0s" data-wow-offset="0" style="width:calc(50% - 2.5px);animation-fill-mode:backwards;"></div>

data-wow-duration：过渡时间
data-wow-delay：延迟时间
data-wow-offset：触发动画时到元素的距离