利用JS实现文字的聚合动画效果

前言

所谓文字聚合效果，原理就是将容器分为若干的小块，然后每个小块设置 background-poisition ，最后添加css3动画就可以了，去掉注释，也就仅仅20行的代码。

先来看看效果图：

js代码如下：

//c为列数，r为行数，把box划分成多少个小块
var box = document.querySelector('.boxWrap1'),c=4,r=8;
//每个小块的宽高
var w = box.offsetWidth/c,h = box.offsetHeight/r;
//循环添加小块
for(var i = 0;i < r;i++){
 for(var j = 0;j < c;j++) {
  var _div=document.createElement('div');
  var _left = j * w,_top = i * h;
  //添加css样式，并设置每个小块的背景
  _div.style.cssText = 'width:'+w+'px;height:'+h+'px;left:'+_left+'px;top:'+_top+'px; opacity:0;background-position:'+(-_left) + 'px ' + (-_top) + 'px';
  //添加css动画时间
  _div.style.transition = 'all '+ Random(1,1.8) +'s ease';
  //添加css的transform动画
  _div.style.transform = 'perspective(800px) translate3d('+Random(-200,200)+'px, '+Random(-200,200)+'px,300px) rotate('+Random(-90,90)+'deg) scale('+ Random(0,2) +')'
  //添加
  box.appendChild(_div);
 };
};
//延时添加动画
setTimeout(function(){
 box.classList.add('set');
},100);
//随机数
function Random(start,end){
 return Math.random()*(end-start)+start;
};

完整的示例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>利用JS实现文字的聚合动画效果</title>
<style>
	.boxWrap1{width: 160px;height: 417px;position: relative;margin:0px auto;}
	.boxWrap1 img{width: 100%;}
	.boxWrap1 div{background: url(http://itakeo.com/wpimg/2_1.png) no-repeat;background-size: 160px auto; position: absolute; left: 0px;top: 0px;
	}
	.boxWrap1.set div{ opacity: 1!important;
			transform:perspective(800px) translate3d(0px,0px,0px) rotate(0deg) scale(1)!important;
			-moz-transform:perspective(800px) translate3d(0px,0px,0px) rotate(0deg) scale(1)!important;
			-webkit-transform:perspective(800px) translate3d(0px,0px,0px) rotate(0deg) scale(1)!important;
	}
	.boxSiteWrap{ width: 100%;overflow: hidden;height: auto; background: #000;padding: 140px 0}
	.boxSiteWrap button{cursor:pointer;display: block;font-size: 16px; width: 140px;height: 40px; background: #fff;color: #000;border:none;margin:30px auto;}
</style>
</head>

<body>
<div class="boxSiteWrap">
<div class="boxWrap1"></div>
<button>重新加载</button>
</div>

<script>
window.addEventListener('load',function(){
;(function(){
	function init(){
		var box = document.querySelector('.boxWrap1'),c=4,r=8;
		var w = box.offsetWidth/c,h = box.offsetHeight/r;
		for(var i=0;i<r;i++){
			for(var j=0;j<c;j++) {
				var _div=document.createElement('div');
				var _left = j * w,_top = i * h;
				_div.style.cssText = 'width:'+w+'px;height:'+h+'px;left:'+_left+'px;top:'+_top+'px; opacity:0;background-position:'+(-_left) + 'px ' + (-_top) + 'px';
				_div.style.transition = _div.style.MozTransition = _div.style.WebkitTransition = 'all '+ Random(1,1.8) +'s ease';
				_div.style.transform = _div.style.MozTransform = _div.style.WebkitTransform = 'perspective(800px) translate3d('+Random(-200,200)+'px, '+Random(-200,200)+'px,300px) rotate('+Random(-90,90)+'deg) scale('+ Random(0,2) +')'
				box.appendChild(_div);
			};
		};
		setTimeout(function(){
			box.classList.add('set')
		},100);
		function Random(start,end){
		 return Math.random()*(end-start)+start;
		};
	};
	init();
	var flag = true;
	document.querySelector('button').onclick = function(){
		if(flag){
			document.querySelector('.boxWrap1').classList.remove('set')
			setTimeout(function(){
				document.querySelector('.boxWrap1').innerHTML = '';
				init();
				flag = true;
			},1200);
			flag = false;
		};
	};
})();
});
</script>
</body>
</html>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

赞 (0)

相关推荐

  • js+css实现文字散开重组动画特效代码分享

    js+css实现文字散开重组动画特效代码分享

    文字散开重组动画这款特效我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看起来非常棒. 运行效果图: 这是输入HAPPY后安按钮后效果,当然可以随便输文字 好酷的特效,连中文都支持,看如下图: 为大家分享的文字散开重组动画特效代码如下 <html> <head> <meta charset="UTF-8"> <title>文字散开重组动画特效</title> <l

  • JS判断页面加载状态以及添加遮罩和缓冲动画的代码

    复制代码 代码如下: function initialize() { addcloud(); //为页面添加遮罩 document.onreadystatechange = subSomething; //监听加载状态改变 } function addcloud() { var bodyWidth = document.documentElement.clientWidth; var bodyHeight = Math.max(document.documentElement.clientHei

  • javascript制作loading动画效果 loading效果

    javascript制作loading动画效果 loading效果

    复制代码 代码如下: /*ajax提交的延时等待效果*/ var AjaxLoding = new Object(); //wraperid : 显示loding图片的容器元素//ms:表示loding图标显示的时长,毫秒//envent:表示出发事件的事件源对象,用于获得出发事件的对象//callback:表示动画结束后执行的回掉方法//stop()方法表示在回掉方法执行成功后执行的隐藏动画的操作AjaxLoding.load = function(lodingid,ms,event,left

  • js实现类似jquery里animate动画效果的方法

    本文实例讲述了js实现类似jquery里animate动画效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现鼠标移上,先宽度变化,再高度变化,最后透明度变化,鼠标移出,再依次变回去的效果. 要点一: startrun(obj,attr,target,fn) box.onmouseover = function(){ startrun(box,"width",200,function(){ startrun(box,"height",200,functio

  • js实现动画特效的文字链接鼠标悬停提示的方法

    本文实例讲述了js实现动画特效的文字链接鼠标悬停提示的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

  • 用js实现的模拟jquery的animate自定义动画(2.5K)

    后来发现还不错.不如继续写下去. 这个版本基本上跟jquery的animate一样了. 我是说效果基本上一样了.(效率还没测试过.): 如果有专业测试人员 帮我测试下. 1:功能说明 兼容主流浏览器. 1:支持回调函数: 2:支持级联动画调用: 3:支持delay动画队列延迟: 4:支持stop停止动画: 5:支持opacity透明度变化: 6:支持+= -= *= /=操作: 7:支持单位操作(px, %); 2:使用说明 jelle(A).animate(B, C, D); A:需要执行动画

  • JS动画效果代码3

    慢慢来,这次实现了向任意方向扩展! 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  &l

  • JS实现超炫网页烟花动画效果的方法

    本文实例讲述了JS实现超炫网页烟花动画效果的方法.分享给大家供大家参考.具体分析如下: 非常炫的使用JS实现的一个网页烟花燃放动画效果,能适应JS做出这样的动画来 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns

  • javascript与css3动画结合使用小结

    当Html5,css3已渐渐成为主流的时候,我还非常习惯的用js去做一些简单的动画.因为在桌面浏览器上, 并非所有的都支持css3.用户也倒是很奇怪,用户习惯并不是每个用户都可以被培养.总有不少人会觉得win7.win8没xp好用.但手机方面就大不一样了,手机浏览器对html5和css3的支持还是很不错的.但手机硬件处理能力却又十分有限.在四核.八核手机横行的今天,依然有像我这样使用双核或单核手机的.js虽好,单奈何接触不多,调不好那种感觉.一个简单的页面滑动,在i7的pc上运行十分流畅,可是,

  • js动画(animate)简单引擎代码示例

    用惯了jquery的同学,相信都很欣赏其动画引擎.确实相对比较完善!如果,如果想像力足够丰富的话,相信可以做出超出想像的效果.当然,跟2d库比起来,还是相差相当一段距离.jquery压根也不是专门为动画而设计的.模拟真实世界方面,还是不足的.但在web世界里还是游刃有余的.动画其实一直是flash的专属领地(web区哉).只是它常常沦为黑客攻击的漏洞所在,而且要装插件,有时候文件实在太大,而且性耗实在是高啊.html5出现后,其实adobe自己都转移阵地到html5了.当然,我觉得很长一段时间内

  • JS实现自定义状态栏动画文字效果示例

    JS实现自定义状态栏动画文字效果示例

    本文实例讲述了JS实现自定义状态栏动画文字效果.分享给大家供大家参考,具体如下: 在IE浏览器中打开,显示动态文字的效果,主要浏览器左下角的文字. <body onload="stack();"> <script type="text/javascript"> var statusText="自定义动画状态栏文字"; var out=""; var pause=100; var animateWidth

随机推荐