js实现元素从远处飞入效果
2015-04-20 03:53:02
今天为大家介绍一个效果，效果是实现元素有从远处飞入的效果，例如说一个人伸着拳头飞出来这样，具体的例子可以查看下面的演示，在这里我实现的是文字的飞入效果，他还可以实现图片等其他元素的飞入效果，有兴趣的朋友可以试试。我先来贴一下代码吧
<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文件，有需要的朋友可以下载。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015-04-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读