<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面滚动到相应位置运行css3动画</title>
<script src="js\jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
var a,b,c;
//获取.con当前高度
a=$(".con").outerHeight();
$(window).scroll(function(){
//滚动长度
var b=$(this).scrollTop();
//遍历div
$(".box div").each(function(){
//获取div到顶部的距离
c=$(this).offset().top;
if(a+b>c){
$(this).addClass("move");
}
else{
$(this).removeClass("move");
}
});
});
});
</script>
<style>
.con{ height:1200px;background-color: aqua;}
.box{ list-style:none; padding:0; margin:0; border-top:2px solid blue;}
.box .move { animation:move 1s;}
@keyframes move{
from{ opacity:0; margin-left:500px;}
to{ opacity:1; margin-left:0;}
}
</style>
</head>
<body>
<div class="con"></div>
<div class="box">
<div><img src="images\page-portfolio-item-1\slide-1.jpg"/></div>
<div><img src="images\page-portfolio-item-1\slide-1.jpg"/></div>
<div><img src="images\page-portfolio-item-1\slide-1.jpg"/></div>
</div>
</body>
</html>
js+css淡入效果
最新推荐文章于 2024-09-15 21:53:51 发布