利用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 相关文章推荐
juqery 学习之四 筛选查找
Nov 30 Javascript
jQuery实现统计输入文字个数的方法
Mar 11 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
js遍历json的key和value的实例
Jan 22 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
Jul 06 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
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 session和cookie使用说明
2010/04/07 PHP
php设计模式 Chain Of Responsibility (职责链模式)
2011/06/26 PHP
php数组去重复数据示例
2014/02/25 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
javascript 数据类型转换(parseInt,parseFloat)
2010/07/20 Javascript
利用jq让你的div居中的好方法分享
2013/11/21 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
vue.js学习笔记之绑定style样式和class列表
2016/10/31 Javascript
Cookies 和 Session的详解及区别
2017/04/21 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
js实现直播点击飘心效果
2020/08/19 Javascript
python定时检查启动某个exe程序适合检测exe是否挂了
2013/01/21 Python
Python文件处理
2016/02/29 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
使用python对多个txt文件中的数据进行筛选的方法
2019/07/10 Python
numpy矩阵数值太多不能全部显示的解决
2020/05/14 Python
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
火山动力Java笔试题
2014/06/26 面试题
Delphi工程师笔试题
2013/09/21 面试题
大学生职业生涯规划范文
2014/01/22 职场文书
干部下基层实施方案
2014/03/14 职场文书
合理化建议书
2015/02/04 职场文书
初中政治教师教学反思
2016/02/23 职场文书
python 算法题——快乐数的多种解法
2021/05/27 Python
Redis高并发防止秒杀超卖实战源码解决方案
2021/11/01 Redis
Ruby使用Mysql2连接操作MySQL
2022/04/19 Ruby