HTML笔记 ·

js实现元素从远处飞入效果

今天为大家介绍一个效果,效果是实现元素有从远处飞入的效果,例如说一个人伸着拳头飞出来这样,具体的例子可以查看下面的演示,在这里我实现的是文字的飞入效果,他还可以实现图片等其他元素的飞入效果,有兴趣的朋友可以试试。我先来贴一下代码吧

<html>
<head>
<title>落帆亭实现元素飞入效果</title>
<style type="text/css">
.center {position: absolute;left: 0;right: 0;margin: auto;z-index: 8;}
.main{position: absolute;width: 100%;height: 100%;margin: 0;overflow: hidden;}
</style>
<script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
<script src="js/TweenMax.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var init=new Object();
			init.height=document.documentElement.clientHeight;
			var tl=new TimelineLite();
			document.addEventListener('touchmove', function (event) {
			//	event.preventDefault();
				event.stopPropagation();
			}, false);
(window).load(function() {
				setTimeout(function(){("h").show();
					TweenLite.from(("#h"), 1, {scale:0.0, opacity:0.0});
					TweenLite.to(("#h"), 1, {scale:1.0, opacity:1.0});	
					},200);
			});
</script>

</head>
<body>
<div class="main">
	<h1 id="h" class="none">
	落帆亭<br>
	luofanting.com.cn
	</h1>
</div>
</body>
</html>

这就是所有的代码了,有不懂的可以给我留言,同时也欢迎大家提出宝贵意见。另外本站还提供上面需要的两个js文件,有需要的朋友可以下载。

参与评论