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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEsomZLE4xMMymwuehFoP1YS9-lZwWcdySyJ9cDSXWBAybrBhEAJoDf8RKMn8MvSPfyfp5eGEVkgBzvKv7o2dn7_iru_BtFgossaTVa8yNU0UpjM2s9-MIFhI0aMr-MI6u7Dzyf8PROKs/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibogdTxELh9pPum7wBneX99F-q1ZDU-XA218Gx3EDpz0wDlcREqB-UiRNwhF56fLaEuE7_9YMBAtlhttj2C4IpH5za0l_HSaYULnq0I9sYcafBvxxaSl-l1P1mWpPRQRm2Npi1Fglvyog/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEsomZLE4xMMymwuehFoP1YS9-lZwWcdySyJ9cDSXWBAybrBhEAJoDf8RKMn8MvSPfyfp5eGEVkgBzvKv7o2dn7_iru_BtFgossaTVa8yNU0UpjM2s9-MIFhI0aMr-MI6u7Dzyf8PROKs/s1600/jquery.png);
background-size: 100% 100%;
border-radius: 50%;
}
#img-2{
width: 160px;
height: 160px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibogdTxELh9pPum7wBneX99F-q1ZDU-XA218Gx3EDpz0wDlcREqB-UiRNwhF56fLaEuE7_9YMBAtlhttj2C4IpH5za0l_HSaYULnq0I9sYcafBvxxaSl-l1P1mWpPRQRm2Npi1Fglvyog/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>
