随页面滚动淡入的动效？

这种前端动效交互感很强啊，以前使用原生的鼠标滚轮监听写过类似的功能。还要加防抖函数，麻烦的很。这段时间参考了套用的一个网页模板，找到了最简单实现这个功能的办法。
————CafuChino

需要用到的库：

• Animate.css：https://daneden.github.io/animate.css/(提供写好的动效)
• waypoint：https://github.com/imakewebthings/waypoints(设置监听点)

在之前这样的应用中，因为不知道如何追踪页面滚动进度，所以设计成了像幻灯片切换的效果，使用的方法是原生监听鼠标滚轮，添加节流函数操作改变一个计数变量，这个计数变量的值为当前页。至于动效的实现是在翻页的同时加上一个绑定动画的类，一段时间之后再删除这个类。总而言之非常繁琐，一个简单的页面写了百余行的js专门用来操作动效。现在找到了比较简单的办法，不过思路在一些方面上依然一样。

waypoint库：

waypoint库是一个可以监听页面滚动位置的库，他监听的方式是监听某一个元素与屏幕定的距离。当设定元素与屏幕距离小于等于所设定的百分比，就会触发事件。而且还可以设定触发时的页面滚动方向，这就形成了向下滚动界面，屏幕上的元素淡入（可以使任何动效或者是任何事件）。插件的使用很简单，文档已经很完整了，所以我只记录一下我摸索的方案：

把包裹需要绑定动效的父容器设定class 为animate-box ,需要绑定动效的元素设定class为to-animate，开始动效添加class为animated，这样不仅比较容易判定元素的状态，而且可以允许父元素内有绑定动效的元素，也有不绑定的元素。

//css部分
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}//animate.css中有定义，可以写在页面css中方便修改
.to-animate {
opacity: 0;
}

可以看出，未执行动效的元素依然存在，只是被调整成了完全透明。如果将其设为hidden，将会导致布局闪烁。

//js部分,使用了jq
$('.animate-box').waypoint(function (direction) {
if (direction === 'down' && !$(this).hasClass('animated')) {
$(this.element).children('.to-animate').addClass('fadeInUp animated');
}
}, {
offset: 75%
});

offset指的是当元素与顶部距离的触发值，direction代表的是达到触发值的时候的方向。有一点非常重要：

这里的this指代的是监听点本身，如果直接使用this，将会获取不到其子元素，而this.element表示的才是绑定监听的元素，一定注意！

之后页面上的元素就会在第一次滚动到那里的时候渐隐显示了，animate.css中定义了很多种的动效类型（代码里的fadeInUp就是其中定义的），想要使用哪种动效，直接添加指定的类就可以了，非常方便√当然waypoint也可以不止绑定动效，可以绑定请求，达到用户统计的作用等等；通过对用户浏览情况统计分析用户意向等。