When MooTools contributor and moo4q creator Ryan Florence first showed me his outstanding CSS animation post, I was floored. His exploding text effect is an amazing example of the power of CSS3 and a dash of JavaScript. I wanted to implement this effect on my new blog redesign but with a bit more pop, so I wrote some MooTools code to take static image and make it an animated, exploding masterpiece. Let me show you how I did it, and as a bonus, I’m created a snippet of jQuery that accomplishes the same effect.
Ryan Florence’s Animation Library
Ryan’s CSS animation library, available with vanilla JavaScript, MooTools, or jQuery, and can only be described as a fucking work of art. His animation library is mobile-enabled, works a variety of A-grade browsers, and is very compact. Download and study Ryan’s animation library before proceeding with this post.
Ryan’s post also features an awesome demo and a few helpful functions. A few of these functions include:
// 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 slider
makeSlider: function(){
var open = false,
next = this.getNext(),
height = next.getScrollSize().y,
transition = {
property: 'height',
duration: '500ms',
transition: 'ease-out'
};
next.setTransition(transition);
this.addEvent('click', 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
The exploding element can be of any type, but for the purposes of this example, we’ll use an A element with a background image:
<a href="/" id="homeLogo">David Walsh Blog</a>
Make sure the element you use is a block element, or styled to be block.
The CSS
The original element should be styled to size (width and height) with the background image that we’ll use as the exploding image:
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; }
Remember to set the text-indent setting so that the link text will not display. The explosion shards will be JavaScript-generated SPAN elements which are displayed as in block format. Note that the SPAN has the same background image as the A element — we’ll simply modify the background position of the element to act as the piece of the logo that each SPAN represents.
The MooTools JavaScript
The first step is putting together a few variables we’ll need to to calculate element dimensions:
// 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
You’ll note that I’ve explicitly set the number of columns and rows I want. You don’t want the shards to be too large or too small, so feel free to experiment. You could probably use another calculation to get column and row numbers, but I’ll leave that up to you.
The next step is looping through each row and column, creating a new SPAN element for each shard. The background position, width, and height of the SPAN will be calculated with the … calculations … we … calculated … above.
// 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("div",{ 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.
The last step is calling the fromChaos method provided by Ryan Florence’s CSS animation code to set into motion the madness!
// Chaos! $$(shards).fromChaos(1000);
There you have it! A completely automated method of exploding an image using CSS3 and MooTools JavaScript!
The jQuery JavaScript
Ryan also wrote the CSS animation code in jQuery so you can easily create a comparable effect with jQuery!
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;
},
makeSlider: 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('click', 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("<div />").addClass("clear"));
}
// Chaos!
jQuery("#homeLogo span").fromChaos();
}
});
Not as beautiful as the MooTools code, of course, but still effective!
And there you have it: CSS animations, JavaScript, and dynamic effects. My favorite part of this effect is how little code is involved. You get a lot of bang with your buck with this. Of course, using this effect everywhere would surely get groans so use it wisely!
Read the full article at: Create an Exploding Logo with CSS3 and MooTools or jQuery
Hosted by Media Temple, domain from Name.com.