利用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 相关文章推荐
类之Prototype.js学习
Jun 13 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
jQuery中[attribute=value]选择器用法实例
Dec 31 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
浅谈javascript中onbeforeunload与onunload事件
Dec 10 Javascript
JS面向对象编程详解
Mar 06 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
angular1配合gulp和bower的使用教程
Jan 19 Javascript
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
微信小程序 组件的外部样式externalClasses使用详解
Sep 06 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 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 开发环境配置(Zend Server安装)
2010/04/28 PHP
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
PHP中如何使用session实现保存用户登录信息
2015/10/20 PHP
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
JavaScript获取ul中li个数的方法
2017/02/13 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
JavaScript字符串转数字的5种方法及遇到的坑
2018/07/16 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
2020/04/01 jQuery
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
[06:45]2018DOTA2亚洲邀请赛 4.5 SOLO赛 Sccc vs Maybe
2018/04/06 DOTA
python生成随机验证码(中文验证码)示例
2014/04/03 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
python调用百度AI接口实现人流量统计
2021/02/03 Python
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
几个数据库方面的面试题
2016/07/01 面试题
个人简历中的自我评价范例
2013/10/29 职场文书
《冬阳童年骆驼队》教学反思
2014/04/15 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
环境建议书
2015/02/04 职场文书
储备店长岗位职责
2015/04/14 职场文书
警示教育观后感
2015/06/17 职场文书
2016年离婚协议书范文
2016/03/18 职场文书
原生JS实现分页
2022/04/19 Javascript
JS实现简单九宫格抽奖
2022/06/28 Javascript