jueves, 17 de septiembre de 2015

jQuery explode effect - Efecto explosión


El método explode os permitirá dar un efecto explosión a elementos div.

El método explode poseé dos argumentos options y callback:

El argumento options tiene las siguientes opciones: pieces, columns, pixels y speed.

pieces: para indicar el número de piezas que conformarán la explosión.
columns: para indicar el número de columnas.
pixels: para indicar los píxeles de expansión de la explosión.
speed: para indicar la velocidad de la explosión.

Por defectos el argumento options viene configurado de la siguiente manera:


 var defaults = {
  pieces: 20,
  columns: 4,
  pixels: 50,
  speed: 500
 };

El argumento callback te permitirá incluir instrucciones una vez ha finalizado la animación.

A continuación puedes ver una serie de ejemplos, haz click sobre los elementos:



jQuery explode effect - Efecto explosión by jQuery Manual





Código fuente con el plugin y los ejemplos ...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="https://code.jquery.com/jquery.js"></script>

<script>

(function($){
/* Author: Manu Dávila | Web: http://jquery-manual.blogspot.com */
$.fn.explode = function(options, callback){
 var defaults = {
  pieces: 20,
  columns: 4,
  pixels: 50,
  speed: 500
 };
 
 if (options === undefined){options = defaults;}
 if (callback === undefined){callback = function(){}};
 if (options.pieces === undefined){options.pieces = defaults.pieces;}
 if (options.columns === undefined){options.columns = defaults.columns;}
 if (options.pixels === undefined){options.pixels = defaults.pixels;}
 if (options.speed === undefined){options.speed = defaults.speed;}
 
 var background_color_piece = this.css("backgroundColor");
 var background_image_piece = this.css("backgroundImage");
 var border_radius_piece = this.css("borderRadius");
 
 this.append("<table style='width: 100%; height: "+this.height()+"px;'></table>");
 for (x = 0; x < (options.pieces/options.columns); x++)
 {
  content = '';
 
  var block = "style='background-color: "+background_color_piece+"; background-image: "+background_image_piece+"; padding: 5px; background-size: 100% 100%; background-repeat: no-repeat; border-radius: "+border_radius_piece+";'";
  
  for (y = 0; y < options.columns; y++)
  {
   content = content + "<td "+block+"></td>";
  }
 
  this.find("table").append("<tr>"+content+"</tr>");
 }
 
 this.css("background", "transparent");
 this.find("table").css({position: "relative"});
 this.find("table").animate({width: "+="+options.pixels, height: "+="+options.pixels, opacity: "-=1", left: "-="+(options.pixels/2), top: "-="+(options.pixels/2)}, options.speed, function(){callback(); $(this).remove();}); 
};
})(jQuery);

 $(function(){
 $("#box-1").on("click", function(){
   $(this).explode({columns: 8, pieces: 64, pixels: 100}, 
   function(){
   $("#box-1").css({backgroundColor: "orange"}); 
   });
 });
 
 $("#img-1").on("click", function(){
   $(this).explode({columns: 4, pieces: 16, pixels: 300, speed: 800}, 
   function(){ 
   $("#img-1").css({backgroundImage: "url(http://2.bp.blogspot.com/-47cR4Yc9VPE/VfFdBJcaQZI/AAAAAAAAIi0/p-MlHfSMpns/s1600/jquery.png)",  backgroundSize: "100% 100%"}); 
   });
 });
 
 $("#img-2").on("click", function(){
   $(this).explode({columns: 10, pieces: 108, pixels: 500, speed: 800}, 
   function(){ 
   $("#img-2").css({backgroundImage: "url(http://3.bp.blogspot.com/-u1mfrmh09sM/Vfryqms5wuI/AAAAAAAAIjY/BDlpa3P6X0M/s1600/color.jpeg)", backgroundSize: "100% 100%"}); 
   });
 });
 });
</script>

<style>
#box-1{
width: 150px; 
height: 150px; 
border-radius: 4px;
background-color: orange;
border-radius: 50%;
}

#img-1{
width: 160px; 
height: 160px; 
background-image: url(http://2.bp.blogspot.com/-47cR4Yc9VPE/VfFdBJcaQZI/AAAAAAAAIi0/p-MlHfSMpns/s1600/jquery.png);
background-size: 100% 100%;
border-radius: 50%;
}

#img-2{
width: 160px; 
height: 160px; 
background-image: url(http://3.bp.blogspot.com/-u1mfrmh09sM/Vfryqms5wuI/AAAAAAAAIjY/BDlpa3P6X0M/s1600/color.jpeg);
background-size: 100% 100%;
}


</style>

</head>
<body>
<div style="margin: 100px;">
<h2>jQuery explode effect - Efecto explosión by <a href="http://jquery-manual.blogspot.com">jQuery Manual</a></h2>
<div id="box-1"></div>
<hr />
<div id="img-1"></div>
<hr />
<div id="img-2"></div>
</div>
</body>
</html>