E-Magnification

Create an Exploding Logo with CSS3 and MooTools or jQuery 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. 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. Ryan's post also features an awesome demo and a few helpful functions. 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 MooTools JavaScript $$(shards).fromChaos(1000);