wow.js使用教程

1.引入css动画库

2.引入wow.js并且初始化

1.设置css类

将CSS类.wow添加到HTML元素：在用户滚动显示它之前，它将是不可见的。

2.选择动画类型

在Animate.css中选择一个动画样式，然后将CSS类添加到HTML元素中。

data-wow-duration: 更改动画持续时间

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

data-wow-offset: 开始动画的距离（与浏览器底部相关）

data-wow-iteration: 动画重复的次数

boxClass: 用户滚动时显示隐藏框的类名。

animateClass: 触发CSS动画的类名（animate.css库默认为'animated'）

offset: 定义浏览器视口底部与隐藏框顶部之间的距离。当用户滚动并到达该距离时，隐藏的框被显示出来。

mobile: 在移动设备上打开/关闭WOW.js。

live: 在页面上不断检查新的WOW元素。

...

a(this).addClass("animated").find(".aninode").each(function() {

a(this).addClass(a(this).attr("data-animate"))

})

...

页面滚动到每个 section 元素的时候，先给它加个名为 animated 的 class ，在这样的 section 内部找到 class 名为 aninode 的 div 元素。这样的 div 元素或者其内部的元素会有个 data-animate="a-****" 的属性。把这个属性的值，也就是 a-**** 也当做 class 名称传给这个 div 元素或者其内部的元素。这个 class 里面就包含有动画样式。也就是说，通过 class="animated" 当做钩子，有 animated 这个 class 的时候，名为 aninode 的 div 元素或者其内部的元素才会执行相关的动画效果。

动画效果的 CSS 样式在 core.js 里面。控制动画执行是在 baomi.js 里面。

其实这个页面可以再完善下 section 元素 move 出屏幕的时候，去掉 animated；当move 回来的时候再加上 animated。目前的情况是，滚动到页面最低下以后，再往上滚动页面，就看不见动画效果了