<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>动画</title>
<script src="jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="modernizr-1.6.min.js" type="text/javascript" charset="utf-8"></script>-->
<link rel="stylesheet" type="text/css" href="animate.css"/>
<style>
*{padding: 0;margin: 0;list-style-type: none;}
/*页面滚动加载*/
.animation-box{width: 100%;clear: both;}
.animation-box ul{width: 100%;float: left;margin-bottom: 60px;}
.animation-box ul li{width: 25%;float: left;}
.animation-box ul li img{width: 100%;float: left;}
</style>
</head>
<body style="height: 1000px;">
<div class="animation-box ">
<ul >
<li><img class="bounce animated" src="feng01.jpg"/></li>
<li><img class="" src="feng02.jpg"/></li>
<li><img class="" src="feng01.jpg"/></li>
<li><img class="" src="feng02.jpg"/></li>
</ul>
<ul >
<li><img class="" src="feng01.jpg"/></li>
<li><img class="" src="feng02.jpg"/></li>
<li><img class="" src="feng01.jpg"/></li>
<li><img class="" src="feng02.jpg"/></li>
</ul>
<ul >
<li><img class="revealOnScroll" data-animation="lightSpeedIn" data-timeout="800" src="feng01.jpg"/></li>
<li><img class="" src="feng02.jpg"/></li>
<li><img class="" src="feng01.jpg"/></li>
<li><img class="" src="feng02.jpg"/></li>
</ul>
<ul>
<li><img class="revealOnScroll" data-animation="lightSpeedIn" data-timeout="400" src="feng01.jpg"/></li>
<li><img class="revealOnScroll" data-animation="bounceInLeft" data-timeout="600" src="feng02.jpg"/></li>
<li><img class="revealOnScroll" data-animation="bounceInRight" data-timeout="800"src="feng01.jpg"/></li>
<li><img class="revealOnScroll" data-animation="lightSpeedIn" data-timeout="1000" src="feng02.jpg"/></li>
</ul>
<ul>
<li><img class="revealOnScroll" data-animation="bounce" data-timeout="400" src="feng01.jpg"/></li>
<li><img class="revealOnScroll" data-animation="bounceInLeft" data-timeout="400" src="feng02.jpg"/></li>
<li><img class="revealOnScroll" data-animation="bounceInRight" data-timeout="400"src="feng01.jpg"/></li>
<li><img class="revealOnScroll" data-animation="bounceInTop" data-timeout="400" src="feng02.jpg"/></li>
</ul>
</div>
</body>
<script>
$(function() {
var $window = $(window);
win_height_padded = $window.height() * 1.1;
//isTouch = Modernizr.touch;
//if (isTouch) { $(‘.revealOnScroll‘).addClass(‘animated‘); }
$window.on(‘scroll‘, revealOnScroll);
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 bounceInLeft bounceInRight‘)
}
})
}
})
</script>
</html>
原文：http://www.cnblogs.com/-zhuli/p/5633831.html