浏览器向下滚动时，页面的CSS3 transform、animation就被触发了。
想要达到这种效果，有很多 jQuery 插件可以用，这里将展示不使用插件做到这种效果。
HTML
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"" type="text/javascript"></script>
<script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.7.2.js"></script>
<link rel="stylesheet" type="text/css" href="animate.min.css">
</head>
<body>
<div data-animation="flipInX" data-timeout="400" class="revealOnScroll">
...some content here....revealOnScroll必须加在滚动时需要触发动效的元素上面。data-animation声明了使用animation的名字， 仅限 animation.css 支持的动效timeout定义了在滚动条件满足时，延时多少时间触发动画
Javascript 和 CSS animation
<script>
$(function() {
var $window = $(window),
win_height_padded = $window.height() * 1.1,
isTouch = Modernizr.touch;
//如果是移动设备，直接加上动画预置类
if (isTouch) { $('.revealOnScroll').addClass('animated'); }
//监听滚动事件，触发函数
$window.on('scroll', revealOnScroll);
//revealOnScroll 函数检查元素是否需要执行动画，是，animation类就会添加并触发
function revealOnScroll() {
var scrolled = $window.scrollTop(),
win_height_padded = $window.height() * 1.1;
//Showed...
$(".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'));
}
}
});
//Hidden...
$(".revealOnScroll.animated").each(function (index) {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded < offsetTop) {
$(this).removeClass('animated fadeInUp flipInX lightSpeedIn')
}
});
}
revealOnScroll();
});当元素不可见的时候，animation类被移掉，这样在一次请求里面多次animate动画。
原文地址：http://www.w3cplus.com/css3/trigger-css-animation-scroll.html
扩展阅读：Modernizr.js
modernizer.js 判断浏览器是否支持html5和css3的新特性
官方站点：http://modernizr.com
<script src="Scripts/Modernizr.js" type="text/javascript"></script>添加完 Modernizr 引用以后，立即生效。
它会在html元素上添加一批CSS的class名称，这些class名称标记当前浏览器支持哪些特性和不支持哪些特性。
- 支持的特性，直接显示该特性的名称作为一个class（例如：
canvas,websockets）， - 不支持的特性，显示的class是“no-特性名称”（例如：
no-flexbox）。
下面这段代码是运行在Chrome下的效果：
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage
websqldatabase indexeddb hashchange history draganddrop websockets
rgba hsla multiplebgs backgroundsize borderimage borderradius
boxshadow textshadow opacity cssanimations csscolumns cssgradients
cssreflections csstransforms csstransforms3d csstransitions fontface
generatedcontent video audio localstorage sessionstorage webworkers
applicationcache svg inlinesvg smil svgclippaths">下面这段代码是运行在IE9下的效果：
<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation
postmessage no-websqldatabase no-indexeddb hashchange no-history
draganddrop no-websockets rgba hsla multiplebgs backgroundsize
no-borderimage borderradius boxshadow no-textshadow opacity
no-cssanimations no-csscolumns no-cssgradients no-cssreflections
csstransforms no-csstransforms3d no-csstransitions fontface
generatedcontent video audio localstorage sessionstorage
no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">
2241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
