CSS3元素滑动等效果
程序员文章站
2024-01-15 08:01:34
...
<!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