html如何设置滚动动画，滚动条触发CSS3动画
在这篇教程中，我将为你介绍如何在页⾯滚动时触发CSS动画。这种效果使⽤JavaScript和CSS就能做到。
Jeet Grid System website 就是使⽤这种⼩技巧的例⼦，当你向下滚动的时候，CSS的transform、animation就被触发了。
想要达到这种⽬的，有很多Javascript/jQuery 插件可以⽤，⽐如WOW，在这篇教程中，我将为你展⽰如何不适⽤插件做到这种效果。
模板
那么我们开始了，⾸先是写好HTML标签，revealOnScroll类必须家在需要在滚动时触发的元素上⾯。
...some
data-animation这个属性声明了将会触发animation.css中animation的名字，当然添加额外的timeout参数也可以使⽤同样的⽅法，这样做当你有很多元素在同个位置被触发时很有⽤。
Javascript 和 CSS animation
然后，我们需要定义⼀些变量在JavaScript⽂件的顶部，(不要忘记加载jQuery和Modernizr需要检查是否为触摸设备)。还有为了实现动画效果，我加载了animation.css
var $window = $(window),
win_height_padded = $window.height() * 1.1,
isTouch = uch;
然后我们需要监听滚动事件，并触发我们的函数。
$('scroll', revealOnScroll);
在revealOnScroll函数⾥⾯我们检查元素是否需要执⾏动画，如果是，animation类就会添加，并触发了CSS animation。
html横向滚动条样式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'));
}
}
});
是不是很容易就完成了~ 还有另⼀个⼩技巧，当元素不可见的时候，animation类被移掉，这样在⼀次请求⾥⾯多次animate动画。
我是周晓楷，华南师范⼤学在校本科⽣，有轻微强迫症，拖延症，正在努⼒学习前端知识！微博@Helkyle。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。