滚动条触发CSS3动画

近几年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>

是不是很容易就完成了~