WOW.js - 一个非常轻量级的动画效果插件,使用它可以组合多种炫酷的效果。
  • 分享到微信朋友圈
    X

关于WOW.js

WOW.js 可以让页面向下滚动时产生css动画效果,让页面看起来更加有趣. WOW.js 依赖 animate.css,所以它支持 animate.css 多达 几十种的动画效果,能满足您的各种需求。

WOW.js优点:

Wow.js是一个轻量级的动画库,使用简单方便。它可以通过添加CSS类来触发动画效果,支持多种动画效果,如淡入、滑动、弹跳等。同时,Wow.js还支持自定义动画效果和事件回调函数,可以根据需要进行个性化设置。

如何使用WOW.js

步骤1:引入插件文件

引入 Animate.css

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

步骤2:使用HTML初始化

选择一个动画风格,然后将CSS类添加到HTML元素

<div class="wow bounceInUp">
    Content to Reveal Here
</div>

步骤3:链接并激活WOW。

将Wow.js文件引入到您的HTML文件中。您可以将下载的Wow.js文件保存在项目中,并在HTML文件中引入该文件。您也可以使用CDN链接直接引入Wow.js文件。

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

    new WOW().init();


    //也可以自定义配置
    var wow = new WOW({
        boxClass: 'wow',
        animateClass: 'animated',
        offset: 0,
        mobile: true,
        live: true
    });
    wow.init();

</script>

参数说明

属性/方法类型默认值说明
boxClass字符串‘wow需要执行动画的元素的 class
animateClass字符串‘animated’animation.css 动画的 class
offset整数0距离可视区域多少开始执行动画
mobile布尔值tru是否在移动设备上执行动画
live布尔值true异步加载的内容是否有效
  • data-wow-duration:更改动画持续时间

  • data-wow-delay:动画开始前的延迟

  • data-wow-iteration:动画的次数重复(无数次:infinite)

  • data-wow-offset:开始动画的距离

这四个属性可选可不选。

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"</div>

动画说明

  1. wow rollIn //从左到右、顺时针滚动、透明度从100%变化至设定值

  2. wow bounceIn //从原位置出现,由小变大超出设定值,再变小小于设定值,再回归设定值、透明度从100%变化至设定值

  3. wow bounceInUp //从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变

  4. wow bounceInDown //从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变

  5. wow bounceInLeft //从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变

  6. wow bounceInRigh //从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变

  7. wow slideInUp //从下往上、上来后固定到设定位置、透明度为设定值不变(up是从下往上)(如果元素在最下面,会撑开盒子高度)

  8. wow slideInDown //从上往下、上来后固定到设定位置、透明度为设定值不变

  9. wow slideInLeft //从左往右、上来后固定到设定位置、透明度为设定值不变(left却是从左往右)

  10. wow slideInRight //从右往左、上来后固定到设定位置、透明度为设定值不变

  11. wow lightSpeedIn //从右往左、头部先向右倾斜,又向左倾斜,最后变为原来的形状、透明度从100%变化至设定值

  12. wow pulse //原位置放大一点点在缩小至原本大小、透明度为设定值不变(配合动画执行次数属性效果更佳)

  13. wow flipInX //原位置后仰前栽、透明度从100%变化至设定值

  14. wow flipInY //原位置左右旋动、透明度从100%变化至设定值

  15. wow bounce //上下抖动、透明度为设定值不变(配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖)

  16. wow shake //左右抖动、透明度为设定值不变(配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖)

  17. wow swing //从右往左、头部先向右倾斜,又向左倾斜,最后变为原来的形状、透明度为设定值不变

  18. wow bounceInU //原位置不变、直接从不显示到显示(无过过渡效果)

  19. wow wobble //原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变