Fork me on GitHub

WOW.js – 让页面滚动更有趣 初学者使用教程

有的页面在向下滚动的时候，有些元素会产生细小的动画效果。虽然动画比较小，但却能吸引你的注意。如果你希望你的页面也更加有趣，那么你可以试试 WOW.js。

WOW.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。

WOW.js for github

Animate.css开源CSS动画库 初学者使用教程

使用方法

1、引入文件
Bower

bower install wowjs

NPM

 npm install wowjs

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

2、HTML
为了隐藏所有应该被隐藏的元素。（防闪烁）
在CSS文件增加一个隐藏样式

 .wow { visibility: hidden; }

<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>

JavaScript

new WOW().init();

高级用法 可以加入 data-wow-duration（动画持续时间）和 data-wow-delay（动画延迟时间）属性，如：

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

JavaScript

var wow = new WOW(
  {
    boxClass:     'wow',     //动画元素css类（默认为wow）
    animateClass: 'animated', // 动画css class（默认为动画）
    offset:       0,          // 到元素的距离触发动画时（默认值为0）
    mobile:       true,       //在移动设备上触发动画（默认值为true）
    live:         true,       // 对异步加载的内容进行操作（默认值为true）
    callback:     function(box) {
      //每次启动动画时都会触发回调
      // //传入的参数是正在动画的DOM节点
    },
    scrollContainer: null // 可选的滚动容器选择器，否则使用window 
  }
);
wow.init();

3、JavaScript

new WOW().init();

如果需要自定义配置，可如下使用：

var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init();

配置

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

注意：
1、需要动画的元素（必须设置为块状或者行内块状！必须设置为块状或者行内块状！必须设置为块状或者行内块状！），并添加class类名。

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

类名前面的wow是每一个带动画的元素都要加的，slideInLeft就是说明动画样式。后面的data-wow-duration（动画持续时间）、data-wow-delay（动画延迟时间）、data-wow-offset（元素的位置露出后距离底部多少像素执行）和data-wow-iteration（动画执行次数）这四个属性可选可不选。

<div class="wow bounce "  data-wow-delay="1.5s"  data-wow-iteration："1"></div>
  • data-wow-duration：更改动画持续时间
  • data-wow-delay：动画开始前的延迟
  • data-wow-offset：开始动画的距离（与浏览器底部相关）
  • data-wow-iteration：动画的次数重复（无限次：infinite）
class名 效果
wow rollIn 从左到右、顺时针滚动、透明度从100%变化至设定值
wow bounceIn 从原位置出现，由小变大超出设定值，再变小小于设定值，再回归设定值、透明度从100%变化至设定值
wow bounceInUp 从下往上、窜上来以后会向上超出一部分然后弹回去、透明度为设定值不变
wow bounceInDown 从上往下、掉下来以后会向下超出一部分然后弹跳一下、透明度为设定值不变
wow bounceInLeft 从左往右、移过来以后会向右超出一部分然后往左弹一下、透明度为设定值不变
wow bounceInRigh 从右往左、移过来以后会向左超出一部分然后往右弹一下、透明度为设定值不变
wow slideInUp 从下往上、上来后固定到设定位置、透明度为设定值不变（up是从下往上）（如果元素在最下面，会撑开盒子高度）
wow slideInDown 从上往下、上来后固定到设定位置、透明度为设定值不变
wow slideInLeft 从左往右、上来后固定到设定位置、透明度为设定值不变（left却是从左往右）
wow slideInRight 从右往左、上来后固定到设定位置、透明度为设定值不变
wow lightSpeedIn 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度从100%变化至设定值
wow pulse 原位置放大一点点在缩小至原本大小、透明度为设定值不变（配合动画执行次数属性效果更佳）
wow flipInX 原位置后仰前栽、透明度从100%变化至设定值
wow flipInY 原位置左右旋动、透明度从100%变化至设定值
wow bounce 上下抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow shake 左右抖动、透明度为设定值不变（配合动画执行次数和动画持续时间属性可以实现剧烈抖动亦或是慢慢抖）
wow swing 从右往左、头部先向右倾斜，又向左倾斜，最后变为原来的形状、透明度为设定值不变
wow bounceInU 原位置不变、直接从不显示到显示（无过过渡效果）
wow wobble 原位置不变、类似于一个人站在那左右晃头、透明度为设定值不变

2、其中data-wow-offset="数值"中的数值是动画完成后元素距离显示器底部的位置，而不是距离浏览器窗口底部的位置。
有的网站采用全屏滚动的fullpage插件与wow相结合的方法，实现的效果比较酷炫。我们完全可以仿写。

但是使用fullpage.js下wow.js无效失效没动作

问题出在fullpage隐藏了滚动条,将滚动条开启即可,把scrollBar设置为true,代码如下

    $(‘#fullpage‘).fullpage({
      scrollBar:true;
    });
    // 最后利用css将滚动条隐藏,将html添加overflowhidden，代码如下
    html{
      overflow:hidden;
    }
posted @ 2019-06-30 23:34  较瘦  阅读(1992)  评论(0)  编辑  收藏  举报
知识点文章整理