Js 之wow.js + animate.css实现页面在滚动下的动画效果

wow.js 允许用户滚动页面的时候展示 CSS 动画。默认的，用户可以使用它来出发 animate.css 动画。但是用户也可以非常容易修改设置喜欢的动画库。
wow.js 需要 animate.css 配合，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。wow.min.js可以实现在滚动下的动画状态。

一、使用

1、引入animate.css

下载地址：https://www.dowebok.com/demo/2014/98/

<link rel="stylesheet" href="animate.css">

2、引入wow.js

下载地址：https://webscripts.softpedia.com/script/Multimedia/3D-Graphics/WOW-js-82123.html

<script src="wow.min.js"></script>

初始化wow.js

if  (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
    new  WOW().init();
}
var  wow =  new  WOW({
     boxClass:  'wow' ,
     animateClass:  'animated' ,
     offset: 0,
     mobile:  true ,
     live:  true
});
wow.init();
属性/方法类型默认值说明
boxClass 字符串 ‘wow’ 需要执行动画的元素的 class
animateClass 字符串 ‘animated’ animation.css 动画的 class
offset 整数 0 距离可视区域多少开始执行动画
mobile 布尔值 true 是否在移动设备上执行动画
live 布尔值 true 异步加载的内容是否有效

data-wow-duration：更改动画持续时间
data-wow-delay：动画开始前的延迟
data-wow-offset：开始动画的距离（与浏览器底部相关）
data-wow-iteration：动画的次数重复（无限次：infinite）

这四个可选，可不选

二、示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://www.kedu.cn/css/animate.css">
    <style>
        div{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="wow fadeInUp" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10"  data-wow-iteration="10"></div>
<script src="https://www.kedu.cn/js/wow.min.js"></script>
<script>
    if  (!(/msie [6|7|8|9]/i.test(navigator.userAgent))){
        new  WOW().init();
    }
</script>
</body>
</html>

 

posted @ 2021-06-08 15:15  样子2018  阅读(704)  评论(0)  编辑  收藏  举报