近年很多网站采用全屏设计且页面内容随鼠标滚动而动起来，如百度经验 (jingyan.baidu.com)的步骤监听，小米(mi.com)产品专题全屏滚动插件overall.js和overall.css配套使用，而合生元(biostime.com.cn)使用了sea.js，并引用animate.css，包括偶尔看到一些企业网站也用了类似效果等等，网上还有很多全屏插件，如fullpage、Scrollify、scrollReveal、mousewheel、Bootstrap、waypoints等 等，能监听滚动条事件的插件均可实现。近期也研究了下如何制作此类网站，分析了多个网站使用的技术都各不相同。

综合分析后选择了2个插件(fullpage、waypoints)，这里重点介绍下waypoints.js，这个插件的效果相比最理想。

Waypoints是什么？

Waypoints 一个轻量级jQuery插件，可用于当鼠标滚动到一个元素时触发执行一个函数，捕获各种滚动事件，例如实现无翻页的内容浏览，或者固定某个元素不让滚动等 等。支持主流浏览器版本。当鼠标向下滚动时，固定在页面顶部显示一个浮动的表头或当鼠标向下滚动到一定位置时自动显示“回到顶部”的按纽。

如何使用？

只需要引用jquery.js,waypoints.js，然后在页尾调用即可！

1. var waypoint = new Waypoint({ 
2.   element: document.getElementById('waypoint'), 
3.   handler: function(direction) { 
4.     console.log('Scrolled to waypoint!') 
5.   } 
6. }) 

演示效果?

在网上也能找到很多默认效果但不是很好看，fullpage的例子比较多，其中有个全屏带响应式的效果(链接)很不错,但美中不足的是去掉全屏增加滚动条后页面会自动弹一下，于是用waypoints模拟制作了一个相似的效果并加上animate.css，调用时需要注意动效的激活顺序。

1、样式

1. animation-name:none;-webkit-animation:none;

animate能再次被执行，需要先添加"移除动效"(上图css)，页面滚动到当前模块时去掉样式即可实现动画再次被激活。

2、JS

1. var reAnimate = function(){ 
2.     var _ele = $(".column"); 
3.     _ele.each(function (index, element) { 
4.         var elementAnimate = $(element).find(".animated"); 
5.         elementAnimate.css({"animation-name":"none","-webkit-animation":"none"});
6.         $(element).waypoint(function (direction) { 
7.                 if (direction == "up") { 
8.                     elementAnimate.css({"animation-name":"none","-webkit-animation":"none"});
9.                 } else { 
10.                     elementAnimate.css({"animation-name":"","-webkit-animation":""});
11.                 } 
12.         }, { 
13.             offset: "90%" 
14.         }); 
15.     }); 
16. }; 
17. reAnimate(); 

JS部分的原理就比较简单了，查找元素判断是否有"移除动效"样式即可。

最后来一个完整版的宣传片，以小米移动电话卡专题页为基础的演示——《借鉴小米移动电话卡专题动效演示》

兼容？

waypoints.js主要作用于滚动的监听和函数执行，所有兼容问题主要来自于浏览器对css3的支持，目前ie10+、edge、firefox、chrome、Opera等浏览器能完美支持css3，Safari浏览器部分css3需要加“-webkit-”前缀才能支持！

注意？

animate.css的各种动效主要作用于块级元素(block element)和块状元素(inline-block element)，内联元素(inline element)有部分动效是不生效的！！！

点评！

waypoints.js+animate.css的组合只是增加了网页的动效，对网站本身的结构没有影响，所以即使不支持css3的浏览器打开网页，除不能看到动效外，其它内容也是能正常浏览的！