Young87

当前位置:首页 >个人收藏

滚动加载动画——wow.js

平常我们在网站开发过程中,可能会需要做一些页面滚动到指定位置再执行某些动画的页面。所以特地收集了一个比较好用的轮子。
[wow.js]

image
一、引入

引入animate.css,因为wow依赖animate动画库,所以需要的动画都可以从里面获取。

引入wow.js

初始化

 new WOW().init();

二、使用方法

在需要添加动画的块元素上面(块元素或者行内块元素,行内元素会有问题)添加类名。

<div class="wow slideInLeft"
    data-wow-duration="2s"     (动画持续时间)
    data-wow-delay="5s"         (动画延迟时间)
    data-wow-offset="10"        (元素的位置露出后距离底部多少像素执行)
    data-wow-iteration="10"> (动画执行次数,infinite为无限循环)
</div>

其中类名wow是每一个带动画的元素都要加的,slideInLeft就是说明动画样式。

具体动画类名可访问animate.css获取或者wow官网获取,这里不多做解释。

三、注

wow兼容ie10及以上,所以使用时需要加判断,ie10以下不初始化插件,即默认展示

   if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
      new WOW().init();
    };

默认wow只加载一次动画,即滚动条再次往回滚动时候,不会有动画。但有时会有特定需求,是需要重复动画的。网上已有基于wow.js修改过的插件。

最后附上该插件下载地址:点我

作者:YINdevelop
链接:https://www.jianshu.com/p/62c26955a0b3
来源:简书

除特别声明,本站所有文章均为原创,如需转载请以超级链接形式注明出处:SmartCat's Blog

上一篇: CSDN原力计划之技术影响力企业博客英雄榜 TOP 50 发布!

下一篇: unity shader序列帧动画代码,顺便吐槽一下unity shader系统

精华推荐