近几年web前端的，关于鼠标滑动到当前页面从而触发动画效果十分的火热，今天我们就来学习下这一效果。
一、首先，我们先来了解一下这一效果实现的原理。
1.一个网页离不开基本的布局，所以首先就是要先用html将所需要的结构布局出来（长页风格）。 2.另外，这一效果的实现主要是结合css3的自定义动画（animation）来实现的。所以，这一阶段，就需要将你所想要实现的动画效果用css3样式实现出来。 3.最后，这也是最重要的一步，就是利用javascript实现对相对应页面动画的触发。
二、接下来我们就来正式的学习一下这一效果。
接下来我们需要在我们的html界面中导入所需要的文件。（moment.js，jquery.min.js，animate.css）。
三、在js中定义我们所需要的变量和定义滚动的时候添加css的方法。
定义所需的变量
var $window = $(window),
win_height_padded = $window.height() * 1.1;
监听滚动事件
$window.on('scroll', revealOnScroll);
定义屏幕滚动的时候给需要执行动画的div执行动画效果
function revealOnScroll() {
var scrolled = $window.scrollTop();
$(".revealOnScroll:not(.animated)").each(function() { var $this = $(this), offsetTop = $this.offset().top; if (scrolled + win_height_padded > offsetTop) { if ($this.data('timeout')) { window.setTimeout(function() { $this.addClass('animated ' + $this.data('animation')); }, parseInt($this.data('timeout'), 10)); } else { $this.addClass('animated ' + $this.data('animation')); } } }) }
四、那么我们开始了，首先是写好HTML标签，revealOnScroll类必须家在需要在滚动时触发的元素上面。
<div data-animation="bounceIn" data-timeout="400" class="revealOnScroll" style="height: 500px;background: red;">...some content here...</div>
是不是很容易就完成了~
