Exploding Logo with CSS3 and jQuery

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.

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEbNZRPEzBSaTRhoA9CiGleZpYsEnzD5nDMVxb0v2ybuTXSDWJbp3E5yTA5K0nlv1TjukkYFiHmn9TOWcIGYMA2HtgKNjm-hcGI4zdBbhgEa76vYQj8YaKu311aU9GLsAIu-2MMpMnwovN/s320/Wayang+Kulit.jpg" id="homeLogo">Deviation</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:

<style type="text/css">
a#homeLogo { 
 width:300px; 
 height:233px; 
 text-indent:-3000px; 
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEbNZRPEzBSaTRhoA9CiGleZpYsEnzD5nDMVxb0v2ybuTXSDWJbp3E5yTA5K0nlv1TjukkYFiHmn9TOWcIGYMA2HtgKNjm-hcGI4zdBbhgEa76vYQj8YaKu311aU9GLsAIu-2MMpMnwovN/s200/Wayang+Kulit.jpg) 0 0 no-repeat; 
 display:block; 
 z-index:2; 
}
a#homeLogo span { 
 float:left;
 display:block;
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEbNZRPEzBSaTRhoA9CiGleZpYsEnzD5nDMVxb0v2ybuTXSDWJbp3E5yTA5K0nlv1TjukkYFiHmn9TOWcIGYMA2HtgKNjm-hcGI4zdBbhgEa76vYQj8YaKu311aU9GLsAIu-2MMpMnwovN/s200/Wayang+Kulit.jpg); 
 background-repeat:no-repeat;
}
.clear { clear:both; }
</style>

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 jQuery JavaScript

Ryan also wrote the CSS animation code in jQuery so you can easily create a comparable effect with jQuery!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://compbenefit.co.cc/wp-content/uploads/cssanimation/CSSAnimation.js"></script>
<script src="http://compbenefit.co.cc/wp-content/uploads/cssanimation/CSSAnimation.jQuery.js"></script>

<script>
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();
 }
});
</script>

and you are done

source article : davidwalsh.name/css-explode

Share this article: