WOW.js – 让页面滚动更有趣

青年码农

发布于 2021-08-18 11:22:17

3.4K0

发布于 2021-08-18 11:22:17

文章被收录于专栏：青年码农

如果给向下滚动的页面增加一些细微的动画，这往往能给浏览者带来更好的体验，WOW.js就是这么一个能让用户眼前一亮的JavaScript库。

WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。由于使用了CSS3动画，所以一些老旧的浏览器是不支持的。为了兼容，可以增加浏览器判断。

使用方法

1. 引入文件-animate和WOW

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

如果是npm包，直接可以用npm或者yarn安装依赖

# npm
npm install wowjs
# yarn
yarn add wowjs

2. 初始化

new WOW().init();

如果你想在初始化之前在修改一些配置，WOW也是支持的

var wow = new WOW(
    {
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated', // animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       // 异步加载的内容是否有效(默认为true)
        callback: function (box) {
            // 每次动画启动时都会触发这个回调函数
            //传入的参数是动画DOM节点
        },
        scrollContainer: null // 可选滚动容器选择器，否则使用窗口
    }
);
wow.init();

3. 给元素添加动画

<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>

注意：这里面的class名是 animate 3x版本及以下，如果你引用的是4x版本，4x版本默认class名需要带前缀（默认为animate__）

<div class="wow animate__slideInLeft"></div>
<div class="wow animate__slideInRight"></div>

animate 也提供完全不带前缀的文件-animate.compat.css，和3x版本使用一样。

支持 animate.css 多达 60 多种的动画效果，同时还可以使用一些高级用法，如：

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

<div class="wow slideInLeft" data-wow-duration="2s"></div>

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

<div class="wow slideInLeft" data-wow-delay="5s"></div>

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

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

data-wow-iteration:动画重复的次数

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

最后一个简单的demo送上

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet">
    <style>
        .row {
            text-align: center;
        }

        .row div {
            padding: 20px;
        }
    </style>
</head>

<body>
    <div class="dowebok">
        <div style="height:100vh;"></div>
        <div class="row">
            <div class="wow rollIn">左边进入</div>
            <div data-wow-offset="10" data-wow-iteration="10" class="wow bounceInDown">WOW.js</div>
            <div data-wow-duration="2s" data-wow-delay="5s" class="wow lightSpeedIn">右边进入</div>
        </div>
        <div style="height:100vh;"></div>
    </div>

    <script src="http://cdn.dowebok.com/131/js/wow.min.js"></script>
    <script>
        new WOW().init();
    </script>

</body>

</html>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2021-08-10，如有侵权请联系 cloudcommunity@tencent.com 删除

css