滚动加载动画——wow.js

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

image

一、引入

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

  2. 引入wow.js

  3. 初始化

     new WOW().init();
    

二、使用方法

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

(动画执行次数,infinite为无限循环)

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

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

三、注

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

        if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
          new WOW().init();
        };
    
  • 默认wow只加载一次动画,即滚动条再次往回滚动时候,不会有动画。但有时会有特定需求,是需要重复动画的。网上已有基于wow.js修改过的插件。

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

你可能感兴趣的:(滚动加载动画——wow.js)