你的分享就是我们的动力 ---﹥

Animated Knockout Letters 文字遮罩插件

时间:2013-05-14 16:10来源:www.chengxuyuans.com 点击:

Animated Knockout Letters可以让我们像在PS中使用文字遮罩一样在网页中实现这样的效果,而且在初始化的时候还会有动画的效果,使用起来也比较简单。

Animated Knockout Letters预览图

Untitled-2

使用步骤

1、引入以下的js和css文件

<script src='jquery.min.js'></script>
<script src="jquery.lettering.js"></script>

2、在head标签中加入以下js代码

<script>
		// DOM Ready
		$(function() {
			$("#poster h1, #poster p").lettering();
			$("#poster p span").each(function() {  $(this).css({ top: -(Math.floor(Math.random()*1001)+1500), left: Math.floor(Math.random()*1001)-500,  }); });
			setTimeout(function() {$('html').addClass("step-one");}, 1000);
			setTimeout(function() {$('html').addClass("step-two");}, 3000);
		});
	</script>

3、在body标签中加入以下格式的html代码

<div id="poster">
	
	<h1>笔墨伺候</h1>
		
	<p>Coming 2011</p>
	
</div>

3、有关的css样式也很重要,请参照网盘下载包中的源码,简洁易懂。

Animated Knockout Letters下载地址

网盘下载:http://pan.baidu.com/share/link?shareid=209477&uk=2166814920

转载注明地址:http://www.chengxuyuans.com/jquery_plugin/Animated Knockout Letters.html