<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./css/animations.css">
<script src="./js/jquery-1.6.1.min.js"></script>
</head>
<style>
.animate {
visibility: hidden;
}
</style>
<body>
<div style="height:1000px;"></div>
<img src="http://www.justinaguilar.com/animations/images/phone.png" id="phone" class="animate"/>
<br/>
<img src="http://www.justinaguilar.com/animations/images/phone.png" class="tossing"/>
<br/>
<img src="http://www.justinaguilar.com/animations/images/phone.png" class="pulse"/>
<br/>
<img src="http://www.justinaguilar.com/animations/images/phone.png" id="phone2" class="animate"/>
<div style="height:1000px;"></div>
</body>
<script>
$(window).scroll(function() {
$('#phone').each(function() {
var imagePos = $(this).offset().top;//匹配元素到 當前文檔 頂端的距離（固定值）
var topOfWindow = $(window).scrollTop();//滾動條到 當前窗口(瀏覽器可視部分) 頂端的距離
// $(this).height() 匹配元素的高度
// $(window).height() 當前窗口的高度
if (topOfWindow >= (imagePos + $(this).height() - $(window).height()) && topOfWindow <= imagePos) {
$(this).addClass("slideUp");
//$(this).addClass("hatch");
}
});
$('#phone2').each(function() {
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (topOfWindow >= (imagePos + $(this).height() - $(window).height()) && topOfWindow <= imagePos) {
$(this).addClass("slideExpandUp");
}
});
});
</script>
</html>animations.css
下載地址1：http://www.justinaguilar.com/animations/index.html
下載地址2：http://pan.baidu.com/s/1dFnaslb