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


Posted in Javascript onJanuary 22, 2017

前言

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

先来看看效果图:

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

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

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>

总结

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

Javascript 相关文章推荐
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
自己写的兼容ie和ff的在线文本编辑器类似ewebeditor
Dec 12 Javascript
js播放wav文件(源码)
Apr 22 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
canvas红包照片实例分享
Feb 28 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
详解vue express启动数据服务
Jul 05 Javascript
webpack之devtool详解
Feb 10 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
Angular2之二级路由详解
Aug 31 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 #Javascript
jQuery实现的分页功能示例
Jan 22 #Javascript
jQuery加载及解析XML文件的方法实例分析
Jan 22 #Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 #Javascript
前端开发必知的15个jQuery小技巧
Jan 22 #Javascript
Vue.js学习之过滤器详解
Jan 22 #Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 #Javascript
You might like
PHP 选项及相关信息函数库
2006/12/04 PHP
PHP之数组学习
2011/05/29 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
javascript (用setTimeout而非setInterval)
2011/12/28 Javascript
javascript中this做事件参数相关问题解答
2013/03/17 Javascript
jquery制作搜狐快站页面效果示例分享
2014/02/21 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
jQuery中closest和parents的区别分析
2015/05/07 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
2016/04/21 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
javascript实现动态时钟的启动和停止
2020/07/29 Javascript
vuex实现购物车功能
2020/06/28 Javascript
[01:54]胎教DOTA2 准妈妈玩家现身中国区预选赛
2016/06/26 DOTA
python实现的系统实用log类实例
2015/06/30 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
widows下安装pycurl并利用pycurl请求https地址的方法
2018/10/15 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
python多进程下实现日志记录按时间分割
2019/07/22 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
Pytorch 解决自定义子Module .cuda() tensor失败的问题
2020/06/23 Python
Kidsroom台湾:来自德国的婴儿用品
2017/12/11 全球购物
Agoda.com官方网站:便宜预订全球酒店,高达80%的折扣
2018/04/04 全球购物
学生个人自我鉴定
2014/03/26 职场文书
针对吵架老公保证书
2015/05/08 职场文书
党性修养心得体会2016
2016/01/21 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL