当前位置:JS特效 » 其他 » WOW.js-元素在页面滚动时展示CSS3动画JS插件
 WOW.js-元素在页面滚动时展示CSS3动画JS插件
如果您觉得内容不错,请分享:

插件介绍

WOW.js是一款效果炫酷的元素在页面滚动时展示CSS3动画的JS插件。默认wow.js使用animate.css作为动画库,但是你可以通过设置来使用你喜欢的动画库。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:57
简要教程

WOW.js是一款效果炫酷的元素在页面滚动时展示CSS3动画的JS插件。默认wow.js使用animate.css作为动画库,但是你可以通过设置来使用你喜欢的动画库。

安装

可以通过bower或npm来安装wow.js插件。

bower install wowjs
npm install wowjs                  
                

使用方法

在页面中引入animate.css文件和wow.min.js文件。



                
HTML结构

如果你想某个HTML元素在页面滚动时执行动画效果,只需要简单的为这个元素添加.wow class类。然后在animate.css中选择一种动画class类。

Content to Reveal Here
初始化插件

可以通过imageMaps()来初始化一个imageMaps实例。

配置参数

你可以在HTML代码中通过data属性来设置配置参数。例如:

默认的JS配置参数如下:

var wow = new WOW(
  {
    boxClass:     'wow',
    animateClass: 'animated',
    offset:       0,
    mobile:       true,
    live:         true,
    callback:     function(box) {
      // the callback is fired every time an animation is started
      // the argument that is passed in is the DOM node being animated
    },
    scrollContainer: null
  }
);
wow.init();                  
                
  • boxClass:动画元素的class名称。默认为'wow'。
  • animateClass:动画class类。默认为'animated'。
  • offset:触发动画时元素的偏移距离。默认为0。
  • mobile:是否在移动设备上触发动画。默认为true。
  • live:是否异步加载内容。默认为true。
  • callback:回调函数。
  • scrollContainer:可选的滚动容器选择器,不设置时默认为window。

WOW.js插件的github主页地址为:https://github.com/matthieua/WOW

Top