利用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 相关文章推荐
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 Javascript
JS生成和下载二维码的代码
Dec 07 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
小程序指纹验证的实现代码
Dec 04 Javascript
浅谈Vue.js组件(二)
Apr 09 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
Vue.js中的组件系统
May 30 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 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系列学习之日期函数使用介绍
2012/08/18 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
jquery实现侧边弹出的垂直导航
2014/12/09 Javascript
干货分享:让你分分钟学会javascript闭包
2015/12/25 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
jquery实现拖动效果
2016/08/10 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
jQuery插件ajaxFileUpload使用详解
2017/01/10 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
详解Angular操作cookies方法
2018/06/01 Javascript
Vue代码整洁之去重方法整理
2019/08/06 Javascript
vue移动端实现手机左右滑动入场动画
2020/06/17 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
原生JS实现留言板
2020/03/26 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
python 实现登录网页的操作方法
2018/05/11 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
python 实现分页显示从es中获取的数据方法
2018/12/26 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
python如何实时获取tcpdump输出
2020/09/16 Python
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
大学生毕业求职的自我评价
2013/09/29 职场文书
升职自荐信范文
2013/10/05 职场文书
食堂采购员岗位职责
2014/03/17 职场文书
共产党员公开承诺书范文
2014/03/28 职场文书
商务英语专业大学生职业生涯规划书
2014/09/14 职场文书
建筑工地文明标语
2014/10/09 职场文书
学习与创新自我评价
2015/03/09 职场文书
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技