JQ滚动入场动画

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>页面滚动到相应位置运行css3动画</title>
<style>
a{text-decoration: none;color:inherit}
.nav{width: 110px;position: fixed; top: 50px;right: 0}
.nav ul{padding:0; list-style: none;display: flex;flex-direction:column;justify-content: space-around;background: grey;}
.nav ul li{
	line-height: 50px;
	font-size: 16px;
	text-align: center;
	color: #fff;
	
}
 
.con{ height:1200px;}
.list{ list-style:none; padding:0; margin:0; border-top:2px solid blue;}
.list li{ height:500px; border-bottom:1px solid green;}
.list .move p{ animation:move 1s;}
@keyframes move{
	from{ opacity:0; margin-left:500px;}
	to{ opacity:1; margin-left:0;}
}
</style>
</head>
 
<body>
<div class="nav">
	<ul>
		<li class="nt0"><a href="#">顶部</a></li>
		<li class="nt1"><a href="#">第一屏</a></li>
		<li class="nt2"><a href="#">第二屏</a></li>
		<li class="nt3"><a href="#">第三屏</a></li>
	</ul>
</div>
<div class="con">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<ul class="list">	
	<li data-nt="nt1">
    	<p>第1屏动画进入视线</p>
    </li>
    <li data-nt="nt2">
    	<p>第2屏动画进入视线</p>
    </li>
    <li data-nt="nt3">
    	<p>第3屏动画进入视线</p>
    </li>
</ul>
<script src="jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
	var a,b,c;
	a=$(window).height();	
	$(window).scroll(function(){		
		var b=$(this).scrollTop();
		$(".list li").each(function(){
			c=$(this).offset().top;							
			if(a+b>c){
				$(this).addClass("move");
			}
			else{
				$(this).removeClass("move");
			}
		});	
	});
 
 
	$(".nav ul li").click(function(e) {
		e.preventDefault();
		var clickEl = $(this), ofTop = 0;
		if(clickEl.attr("class") != "nt0"){
			$("ul.list li").each(function() {
				if($(this).data("nt") === clickEl.attr("class")){
					ofTop = $(this).offset().top;
				}
			})
		}
		$("html").animate({scrollTop: ofTop}, 300)
	})
				
});
</script>
</body>
</html>
猜你喜欢
