Google 3D搜索盒子动效

注意Google搜索盒子正前方的左上角有个调整盒子高度的按钮。点中它然后鼠标上下移动就可以调节高度。

3d,box,google

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2243
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var theApp;
var RX_URL = /^ *https?:\/\/[^ ]+/ ;
var TILT_BASE = 2.0;

function CubeApp()
{
	var _this = this;

this.resizing = false;

this.resize_handle = $("#resize-handle");
	var scr = $("html");

this.resize_handle.mousedown(function(e){_this.onResizeHandleMouseDown(e);});
	scr.mousemove(function(e){_this.onResizeHandleMouseMove(e);});
	scr.mouseup(  function(e){_this.onResizeHandleMouseUp(e);});

this.qtext = $("#search-text");

this.tilt_cur = this.tilt = TILT_BASE;
	this.rot_cur  = this.rot  = 0;

this.lidAngle  = 0;
	this.lidAngleV = 0;
	this.close_ok = false;
	this.playing = false;
	this.iframe = $('#bottom-iframe').hide();

this.rootTransMatrix = new M44();
	this.rootTransNode = new TransformNode(this.rootTransMatrix);

this.rootTransMatrix.rotX(this.tilt);

this.lidTrans1 = (new M44()).translate(0, 100, 0);
	this.lidTrans2 = new M44();

this.box = new CSSCube(200, 200, 80, this.rootTransNode);

var gbox = document.getElementById('gift-box');
	var i;

for (i = 0;i < 4;i++) {
		var f = this.box.getSide(i);
		f.element = gbox.childNodes[7+i];
		f.backElement = gbox.childNodes[1+i];
	}
	this.box.getTop().element = gbox.childNodes[11];
	this.frontElement = gbox.childNodes[7];

var bt = this.box.getBottom();
	bt.element = gbox.childNodes[5];
	bt.preTrans.rotX(Math.PI);
	this.box.getTop().backElement = gbox.childNodes[6];

this.floorFace = new CSSFace(bt.tNode, 256, 256);
	this.floorFace.element = gbox.childNodes[0];
	this.floorFace.N.z = 1;

this.updateTransform();
}

CubeApp.prototype = {
	onResizeHandleMouseDown: function(e) {
		this.resizing = true;
		this.prevHandleY = e.screenY;
		this.prevBoxH = this.box.height;
	},

onResizeHandleMouseUp: function(e) {
		this.resizing = false;
	},

onResizeHandleMouseMove: function(e) {
		if (this.resizing) {
			var yy = this.rootTransMatrix._22;
			if (yy < -0.01 || yy > 0.01) {
				var dy = e.screenY - this.prevHandleY;

var h = this.prevBoxH - dy/yy;
				if (h < 20) h = 20;
				if (h > 200) h = 200;
				this.box.changeHeight(h);

this.frontElement.firstChild.style.height = this.frontElement.style.height;
				this.frontElement.firstChild.style.width = this.frontElement.style.width;
				this.updateTransform();
			}
			else
				this.resizing = false;
		}
	},

setLidRotate: function(a) {
		this.lidTrans2.rotX(-a);
		this.lidTrans2._42 = -100;
		this.box.getTop().preTrans.mul(this.lidTrans1, this.lidTrans2);
	},

onMove: function(e) {
		if (e.pageX >= 0 && e.pageY) {
			this.rot = e.pageX*0.006-0.9;

this.tilt = (TILT_BASE - e.pageY*0.004);
			if (this.tilt < 0.5) this.tilt = 0.5;

if (!this.playing)
				this.doAnimation();
		}
	},

onSearchKeydown: function(e) {
		if (e.keyCode == 13) {
			this.onSearchClick();
		}
	},

onSearchClick: function(e) {
		this.lidAngle += 0.01;
		this.lidAngleV = 0.17;
		this.close_ok = false;

this.iframe.show();
		this.iframe[0].setAttribute('src', "http://images.google.com/m/search?q="+this.qtext.val());

if (!this.playing)
			this.doAnimation();
	},

onCloseClick: function(e) {
		e.stopPropagation();
		this.close_ok = true;
		if (this.lidAngle > 1.2) {
			this.lidAngle -= 0.1;
			this.lidAngleV = 0.01;
		}

if (!this.playing)
			this.doAnimation();
	},

intpMotion: function() {
		var dR = this.rot_cur - this.rot;
		var dT = this.tilt_cur - this.tilt;

if (dR<0) dR = -dR;
		if (dT<0) dT = -dT;

var not_finished = false;
		if (dR < 0.002)
			this.rot_cur = this.rot;
		else {
			not_finished = true;
			this.rot_cur = this.rot_cur*0.8 + this.rot*0.2;
		}

if (dT < 0.002)
			this.tilt_cur = this.tilt;
		else {
			not_finished = true;
			this.tilt_cur = this.tilt_cur*0.8 + this.tilt*0.2;
		}

return not_finished;
	},

doAnimation: function() {
		this.playing = false;
		if (this.lidAngle > 0) {
			this.playing = true;
			if (this.close_ok || this.lidAngleV > 0)
				this.lidAngleV -= 0.01;

this.lidAngle += this.lidAngleV;

if (this.lidAngle < 0) {
				this.lidAngle = 0;
				this.iframe[0].setAttribute('src', "about:blank");
				this.iframe.hide();
			}
			else if (this.lidAngle >= 1.3) {
				this.lidAngle = 1.3;
				this.playing = false;
			}
		}
		else {
			this.lidAngle  = 0;
			this.lidAngleV = 0;
		}

this.setLidRotate(this.lidAngle);

if (!this.resizing && this.intpMotion())
			this.playing = true;

this.updateTransform();

if (this.playing) {
			var _this = this;
			setTimeout(function(){_this.doAnimation()}, 10);
		}
	},

updateTransform: function() {
		this.box.localTrans.rotY(this.rot_cur);
		this.box.localTrans._42 = (80-this.box.height)/2;
		this.rootTransMatrix.rotX(this.tilt_cur);
		this.rootTransMatrix._42 = (80-this.box.height)/2;
		this.floorFace.postTrans.translate(-28, -88 - this.box.localTrans._42, 0);

this.box.applyTransform();
		this.floorFace.applyTransform();
	}
}

launch();

编译

CSS

#gift-box {
  position: relative;
  left: 80px;
  top: 130px;
  width: 20px;
  height: 20px;
  overflow: visible; }

#gift-box > img {
  position: absolute;
  left: 0;
  top: 0; }

#boxlid {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  width: 200px;
  height: 200px;
  overflow: hidden;
  background: url(/uploads/fiddles/675/boxf3.png);
  font-size: 13px; }

#front-panel {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  width: 200px;
  height: 80px;
  overflow: hidden; }

#resize-handle {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 0;
  background: url(/uploads/fiddles/675/handles.png) no-repeat top left;
  -moz-user-select: none;
  -webkit-user-select: none; }

#boxlid .box-label {
  color: #543;
  padding: 9px 2px;
  text-align: center; }

#bottom-panel, #bottom-inner {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  overflow: hidden;
  background: url(/uploads/fiddles/675/boxf2.png); }

#bottom-panel textarea {
  width: 90px;
  height: 90px;
  margin: 3px;
  padding: 0;
  font-size: 10px;
  border: none;
  background-color: transparent; }

#bottom-inner {
  text-align: center; }

#bottom-inner iframe {
  width: 200px;
  height: 170px;
  border: none;
  background-color: #fff; }

.box-label h2 {
  margin: 30px 10px 10px 10px;
  padding: 0;
  font-size: 11px; }

button {
  margin: 1px;
  cursor: pointer; }

.warn {
  position: absolute;
  top: 0px;
  color: #a00;
  font-size: 12px;
  background: #ff8;
  padding: 3px;
  -webkit-transform: translate(0px, -90px);
  -moz-transform: translate(0px, -90px); }

HTML

注意Google搜索盒子正前方的左上角有个调整盒子高度的按钮。点中它然后鼠标上下移动就可以调节高度。

3d,box,google

编辑器支持Emmet

快捷键

注意Google搜索盒子正前方的左上角有个调整盒子高度的按钮。点中它然后鼠标上下移动就可以调节高度。

3d,box,google

HTML5 WebGL 很棒的头像和图形3D粒子效果

CSS3 Grid离散宽度调整动画和Flexbox平滑扩展动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：