• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

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

开发技术 开发技术 2周前 (06-08) 10次浏览

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>

 


程序员灯塔
转载请注明原文链接:Js 之wow.js + animate.css实现页面在滚动下的动画效果
喜欢 (0)