GSAP小应用——JS单页滚屏

浏览数：29 / 时间：2015年06月09日

好吧，第一次写，比想像中的花时间呢，总算是写好了。也好久没写博客了，就发上来看看吧！

说明：就是一个很普通的单屏滚动效果，一次滚一屏那样子。

PS：有了这个，再加上TimelineMax，那不就~~ 　　<(￣︶￣)>

PS2：用的是touch事件，只有在手机浏览器或像chrome手机模拟器之类的浏览器中才能看到效果！

<!DOCTYPE html>
<html>
<head>
	<title>js单屏滚动</title>
	<meta charset=‘utf-8‘/>
	<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
	<style type="text/css">
	html,body{height: 100%; margin: 0; padding: 0;}
	.page{height: 100%; font-size: 30em; text-align: center; background-color: rgb(68, 164, 168);}
	</style>

	<!-- 引入GSAP -->
	<script type="text/javascript" src=‘http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js‘></script>
    <script type="text/javascript" src=‘http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/easing/EasePack.min.js‘></script>
    <script type="text/javascript" src=‘http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js‘></script>
	

	<script type="text/javascript">
	//定义初始屏
	var currentPage = 1;
	//定义初始触点纵坐标
	var old_clientY	= 0;
	var new_clientY	= 0;
	//定义屏幕高度
	var stage 		= document.body || document.documentElement; 
	var stageHeight = stage.clientHeight;
	//定义屏幕个数
	var pageNum 	= 4;

	//禁止屏幕滚动
	window.addEventListener(‘touchmove‘,function(ev){
		ev.preventDefault();
	});

	window.addEventListener(‘touchstart‘,function(ev){
		old_clientY = ev.changedTouches[0][‘clientY‘];
	});

	window.addEventListener(‘touchend‘,function(ev){
		new_clientY = ev.changedTouches[0][‘clientY‘];

		//滚动超过30个像素就不滚动
		if(Math.abs(new_clientY - old_clientY) < 30) return;

		if(new_clientY > old_clientY){//住下拉向上滚
			currentPage--;
			if(currentPage < 1) 		currentPage = 1;
		}else{//住上拉向下滚
			currentPage++;
			if(currentPage > pageNum) 	currentPage = pageNum;
		}

		TweenLite.to(‘body‘, 0.8, {scrollTop: (currentPage-1) * stageHeight, ease: Back.easeInOut});
	});
	</script>
</head>
<body>
	<div class=‘page‘>1</div>
	<div class=‘page‘>2</div>
	<div class=‘page‘>3</div>
	<div class=‘page‘>4</div>
</body>
</html>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

GSAP小应用——JS单页滚屏