0
点赞
收藏
分享

微信扫一扫

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

40dba2f2a596 2022-06-01 阅读 103

如果给向下滚动的页面增加一些细微的动画,这往往能给浏览者带来更好的体验,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>



举报

相关推荐

0 条评论