网站页面滚动加载动画JS特效之二

摘要： 昨天发布了网站页面滚动加载动画JS特效制作，但是加载的页面并不怎么完美，文章页面不能直接加载出来，需要滚动条继续下来，可能是没有调节js导致的，所以今天又重新测试了wow.js，感...

昨天发布了网站页面滚动加载动画JS特效制作，但是加载的页面并不怎么完美，文章页面不能直接加载出来，需要滚动条继续下来，可能是没有调节js导致的，所以今天又重新测试了wow.js，感觉这个不错，很喜欢，有兴趣的可以测试下。页面在向下滚动的时候，有些元素会产生细小的动画效果。虽然动画比较小，但却能吸引你的注意。比如刚刚发布的 iPhone 6 的页面（查看）。如果你希望你的页面也更加有趣，那么你可以试试 WOW.js。

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

浏览器兼容

IE10+	Chrome	Firefox	Opera	Safari

IE6、IE7 等老旧浏览器不支持 CSS3 动画，所以没有效果；而 wow.js 也使用了 querySelectorAll 方法，IE 低版本会报错。为了达到更好的兼容，最好加一个浏览器及版本判断。

使用方法

1、引入文件（自带的css样式）

 JavaScript

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

2、HTML（给需要滚动动画的div增加两个css属性）

 JavaScript

<div class="wow fadeInDown"></div>

div框架内的css可以自定义，比如想象等，更多好玩的功能可以自己尝试。

 JavaScript

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

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

 JavaScript

<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>

3、JavaScript（最后引入js和script语句）

 JavaScript

<script src="/wow.js"></script><script>    wow = new WOW(    {    animateClass: 'animated',    offset:       100,    callback:     function(box) {    console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")    }    }    );    wow.init();    </script>

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

 JavaScript

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

配置

这个跟上次的不太一样，引入了css+script其他步骤相同，其他功能未测，大家可以自己DIY。