Create an Exploding Logo with CSS3 and MooTools or jQuery

MooTools contribution and moo4q creator 瑞郎首先向我展示了他的,我发言。 他的爆炸性文字效应是国家安全局3 和 Java形形形色色的例证。 我希望对我的新的博客重新设计发挥这一作用,但稍感pop,因此,我写了一些摩托勒斯法典,以静态形象,使之成为一个充满激动的、爆炸的主干。 让我向各位介绍我是如何做的,作为奖金,我创造了一个能够产生同样效果的 j子。

Ryan Florence s Animation Library

瑞安·考斯康星图书馆,可与范 Java文、莫洛特勒斯文或 j相查阅,只能被描述为艺术的 f。 他的动画图书馆是移动式的,使用各种A级浏览器,而且很紧。 下载和研究 瑞安的动画图书馆在着手执行这一职务之前。

瑞安的岗位还有awesome demo和一些有益的职能。 其中一些职能包括:

// reset transforms to this
var zeros = {x:0, y:0, z:0};

// Implement animation methods on the element prototype
Element.implement({
	
	// Scatter elements all over the place
	scatter: function(){
		return this.translate({
			x: Number.random(-1000, 1000),
			y: Number.random(-1000, 1000),
			z: Number.random(-500, 500)
		}).rotate({
			x: Number.random(-720, 720),
			y: Number.random(-720, 720),
			z: Number.random(-720, 720)
		});
	},
	
	// Return them to their original state
	unscatter: function(){ 
		return this.translate(zeros).rotate(zeros);
	},
	
	//  Frighten the image!  AHHHHHHHH!
	frighten: function(d){
		this.setTransition( timing-function ,  ease-out ).scatter();
		setTimeout(function(){ 
			this.setTransition( timing-function ,  ease-in-out ).unscatter();
		}.bind(this), 500);
		return this;
	},
	
	// Zoooooom into me
	zoom: function(delay){
		var self = this;
		this.scale(0.01);
		setTimeout(function(){
			self.setTransition({
				property:  transform ,
				duration:  250ms ,
				 timing-function :  ease-out 
			}).scale(1.2);
			setTimeout(function(){
				self.setTransition( duration ,  100ms ).scale(1);
			}, 250)
		}, delay);
	},
	
	// Create a spder
	makeSpder: function(){
		var open = false,
			next = this.getNext(),
			height = next.getScrollSize().y,
			transition = {
				property:  height ,
				duration:  500ms ,
				transition:  ease-out 
			};
		next.setTransition(transition);
		this.addEvent( cpck , function(){
			next.setStyle( height , open ? 0 : height);
			open = !open;
		});
	},
	
	// Scatter, come back
	fromChaos: (function(x){
		var delay = 0;
		return function(){
			var element = this;
			//element.scatter();
			setTimeout(function(){
				element.setTransition({
					property:  transform ,
					duration:  500ms ,
					 timing-function :  ease-out 
				});
				setTimeout(function(){
					element.unscatter();
					element.addEvents({
						mouseenter: element.frighten.bind(element),
						touchstart: element.frighten.bind(element)
					});
				}, delay += x);
			}, x);
		}
	}())

});

Now let s jump on the exploding logo!

The HTML

爆炸性元素可以是任何类型的,但就这一例子而言,我们使用具有背景形象的元素:

<a href="/" id="homeLogo">David Walsh Blog</a>

确保你使用的内容是阻碍因素,或成为障碍。

The CSS

原来的要素应划为面积(宽度和高度),其背景形象将我们用作爆炸性形象:

a#homeLogo	{ 
	width:300px; 
	height:233px; 
	text-indent:-3000px; 
	background:url(/wp-content/themes/2k11/images/homeLogo.png) 0 0 no-repeat; 
	display:block; 
	z-index:2; 
}
a#homeLogo span { 
	float:left;
	display:block;
	background-image:url(/wp-content/themes/2k11/images/homeLogo.png); 
	background-repeat:no-repeat;
}
.clear { clear:both; }

注意确定案文,以便链接案文不会显示。 爆炸的硬体是 Java形形形形形形形形色色的SPAN元素。 请注意,国家公共行政网具有与A要素相同的背景形象——我们只是修改该要素的背景立场,作为每个国家财政局所代表的标志。

The MooTools JavaScript

第一步是汇集我们计算要素层面所需的几个变量:

// Get the proper CSS prefix from the page
var cssPrefix = false;
switch(Browser.name) { // Implement only for Chrome, Firefox, and Safari
	case "safari":
	case "chrome":
		cssPrefix = "webkit";
		break;
	case "firefox":
		cssPrefix = "moz";
		break;
}

if(cssPrefix) {
	
	// 300 x 233
	var cols = 10; // Desired columns
	var rows = 8; // Desired rows
	var totalWidth = 300; // Logo width
	var totalHeight = 233; // Logo height
	var singleWidth = Math.ceil(totalWidth / cols); // Shard width
	var singleHeight = Math.ceil(totalHeight / rows); // Shard height
	var shards = []; // Array of SPANs
	

请注意,我已明确列出我所希望的栏目和行号。 你们不想让hard子太大或太小,因此可以自由试验。 你可能利用另一个计算方法得出一栏和行数,但我留待你。

下一步是通过各行各业和一栏,为每一行各业创造新的国家公共行政网要素。 将以......计算......我们......计算出的计算方法计算国家航空航天局的背景位置、宽度和高度。

// Remove the text and background image from the logo
var logo = document.id("homeLogo").set("html","").setStyles({ backgroundImage: "none" });

// For every desired row
rows.times(function(rowIndex) {
	// For every desired column
	cols.times(function(colIndex) {
		// Create a SPAN element with the proper CSS settings
		// Width, height, browser-specific CSS
		var element = new Element("span",{
			style: "width:" + (singleWidth) + "px;height:" + (singleHeight) + "px;background-position:-" + (singleHeight * colIndex) + "px -" + (singleWidth * rowIndex) + "px;-" + cssPrefix + "-transition-property: -" + cssPrefix + "-transform; -" + cssPrefix + "-transition-duration: 200ms; -" + cssPrefix + "-transition-timing-function: ease-out; -" + cssPrefix + "-transform: translateX(0%) translateY(0%) translateZ(0px) rotateX(0deg) rotateY(0deg) rotate(0deg);"
		}).inject(logo);
		// Save it
		shards.push(element);
	});
	// Create a DIV clear for next row
	new Element("span",{ clear: "clear" }).inject(logo);
});

With the SPAN elements, you ll note that several CSS3 properties are being set to it, allowing the browser to do its magic.  Using CSS3 is much less resource-consuming within the browser than using JavaScript to do all of the animation.

最后一个步骤是,将罗安斯·弗洛朗斯·科斯塔法提供的“查戈斯”方法称为“mad!”

// Chaos!
$$(shards).fromChaos(1000);

你们有! 采用CSS3和MooTools Java的全自动化图像探索方法!

The jQuery JavaScript

瑞安还写了康乐医院的动画法,以便你能够轻松地产生类似效果!

Number.random = function(min, max){
	return Math.floor(Math.random() * (max - min + 1) + min);
};

var zeros = {x:0, y:0, z:0};

jQuery.extend(jQuery.fn, {

	scatter: function(){
		return this.translate({
			x: Number.random(-1000, 1000),
			y: Number.random(-1000, 1000),
			z: Number.random(-500, 500)
		}).rotate({
			x: Number.random(-720, 720),
			y: Number.random(-720, 720),
			z: Number.random(-720, 720)
		});
	},

	unscatter: function(){ 
		return this.translate(zeros).rotate(zeros);
	},

	frighten: function(d){
		var self = this;
		this.setTransition( timing-function ,  ease-out ).scatter();
		setTimeout(function(){
			self.setTransition( timing-function ,  ease-in-out ).unscatter();
		}, 500);
		return this;
	},

	zoom: function(delay){
		var self = this;
		this.scale(0.01);
		setTimeout(function(){
			self.setTransition({
				property:  transform ,
				duration:  250ms ,
				 timing-function :  ease-out 
			}).scale(1.2);
			setTimeout(function(){
				self.setTransition( duration ,  100ms ).scale(1);
			}, 250)
		}, delay);
		return this;
	},

	makeSpder: function(){
		return this.each(function(){
			var $this = $(this),
				open = false,
				next = $this.next(),
				height = next.attr( scrollHeight ),
				transition = {
					property:  height ,
					duration:  500ms ,
					transition:  ease-out 
				};
			next.setTransition(transition);
			$this.bind( cpck , function(){
				next.css( height , open ? 0 : height);
				open = !open;
			});
		})
	},

	fromChaos: (function(){
		var delay = 0;
		return function(){
			return this.each(function(){
				var element = $(this);
				//element.scatter();
				setTimeout(function(){
					element.setTransition({
						property:  transform ,
						duration:  500ms ,
						 timing-function :  ease-out 
					});
					setTimeout(function(){
						element.unscatter();
						element.bind({
							mouseenter: jQuery.proxy(element.frighten, element),
							touchstart: jQuery.proxy(element.frighten, element)
						});
					}, delay += 100);
				}, 1000);
			})
		}
	}())

});


// When the DOM is ready...
$(document).ready(function() {
	
	// Get the proper CSS prefix
	var cssPrefix = false;
	if(jQuery.browser.webkit) {
		cssPrefix = "webkit";
	}
	else if(jQuery.browser.mozilla) {
		cssPrefix = "moz";
	}
	
	// If we support this browser
	if(cssPrefix) {
		// 300 x 233
		var cols = 10; // Desired columns
		var rows = 8; // Desired rows
		var totalWidth = 300; // Logo width
		var totalHeight = 233; // Logo height
		var singleWidth = Math.ceil(totalWidth / cols); // Shard width
		var singleHeight = Math.ceil(totalHeight / rows); // Shard height
		
		// Remove the text and background image from the logo
		var logo = jQuery("#homeLogo").css("backgroundImage","none").html("");
		
		// For every desired row
		for(x = 0; x < rows; x++) {
			var last;
			//For every desired column
			for(y = 0; y < cols; y++) {
				// Create a SPAN element with the proper CSS settings
				// Width, height, browser-specific CSS
				last = jQuery("<span />").attr("style","width:" + (singleWidth) + "px;height:" + (singleHeight) + "px;background-position:-" + (singleHeight * y) + "px -" + (singleWidth * x) + "px;-" + cssPrefix + "-transition-property: -" + cssPrefix + "-transform; -" + cssPrefix + "-transition-duration: 200ms; -" + cssPrefix + "-transition-timing-function: ease-out; -" + cssPrefix + "-transform: translateX(0%) translateY(0%) translateZ(0px) rotateX(0deg) rotateY(0deg) rotate(0deg);");
				// Insert into DOM
				logo.append(last);
			}
			// Create a DIV clear for row
			last.append(jQuery("<span />").addClass("clear"));
		}
		
		// Chaos!
		jQuery("#homeLogo span").fromChaos();
	}
});

当然,与摩托勒斯法典不一样美丽,但依然有效!

MooTools Demo jQuery Demo

这里还有:CSS的动画、 Java版和动态效应。 我对这一点的有利部分是,涉及的法典很少。 你们与你们的 b们一道获得了很多的禁忌。 当然,在任何地方使用这种影响肯定会让农民如此明智地加以利用!