Share a CSS3 Click on the explosion Drop effect code

A simple code, effective JQUERY+CSS3 effect Click div block, will automatically broken and scattered to the bottom of the page

[Image]

Code

$ (document). Ready (function () {//Generate the clips.  In the This case I ' m using 5 (or pieces) (Genclips = function () {///for easy use$t = $ ('. Clipped-box ');//Like I said, we ' re Using 5!var amount = 5;//Get the width of each clipped rectangle.var width = $t. Width ()/amount;var height = $t. Height ( )/amount;//The total is the square of the Amountvar totalsquares = Math.pow (amount, 2);//The HTML of the Contentvar HT ml = $t. Find ('. Content '). html (); var y = 0;for (var z = 0; z <= (amount*width); z = z+width) {$ (' <p class= ' clipped "s Tyle= "Clip:rect (' +y+ ' px, ' + (z+width) + ' px, ' + (y+height) + ' px, ' +z+ ' px) ' > ' +html+ ' </p> '). AppendTo ($t); if (z = = = (amount*width)-width) {y = y + height;z =-width;} if (y = = = (amount*height)) {z = 9999999;}}}) ()//A quick random function for selecting random numbersfunction rand (min, max) {return Math.floor (Math.random () * (max -min + 1)) + min;} A variable Check for when the animation are mostly overvar first = false,clicked = false;//on click$ ('. ClIpped-box P '). On (' click ', function () {if (clicked = = = False) {clicked = true;$ ('. Clipped-box. Content '). css ({' Display ': ' None '});//Apply to each Clipped-box p.$ ('. Clipped-box p:not (. Content) '). each (function () {//So the speed is a random spee D between 90m/s and 120m/s. I know that seems like a lot//but otherwise it seems too slow.  That's due to how I handled the Timeout.var v = rand (+), angle = rand (+),//The angle (the angle of projection) is a random number between and Degrees.theta = (angle * math.pi)/,//theta are the angle in RADIANSG =-9.8; and Gravity is-9.8. If you live on another planet feel free to change//$ (this) as Selfvar self = $ (this);//time is initially zero, also set Some random variables. It ' s higher than the total time for the projectile motion//because we want the squares to go off screen. var t = 0,z, R, NX, Ny,totalt = 15;//The direction can either is left (1), right ( -1) or center (0). This is the horizontal direction.var negate= [1,-1, 0],direction = negate[Math.floor (math.random () * negate.length)];//Some random numbers for altering the shape s Positionvar randdeg = rand ( -5, ten), Randscale = rand (0.9, 1.1), RANDDEG2 = rand (5);//Because box Shadows is a bit l Aggy (by a bit I mean ' box shadows won't work in inpidual clipped PS at all ')//we ' re altering the background colour s Lightly manually, in order to give the PS differentiation when they are//hovering around in the air.var color = $ (this). C  SS (' BackgroundColor '). Split (' RGB (') [1].split (') ') [0].split (', '), Colorr = rand ( -20, $),//You might want to alter these Manually If you change the COLORCOLORGB = rand ( -20, $),//To get the right Consistency.newcolor = ' rgb (' + (parsefloat (c Olor[0]) +colorr) + ', ' + (parsefloat (color[1]) +colorgb) + ', ' + (parsefloat (color[2]) +colorgb) + ') ';//and Apply those$ ( This). css ({' Transform ': ' Scale (' +randscale+ ') skew (' +randdeg+ ' deg) Rotatez (' +randdeg2+ ' deg) ', ' background ': Newcolor}); Set an Intervalz = SetInterval(function () {///horizontal speed was constant (no wind resistance on the Internet) var ux = (Math.Cos (theta) * v) * Direc tion;//Vertical speed decreases as time increases before reaching 0 at its peakvar uy = (Math.sin (theta) * v)-((-G) * t);//The Horizontal POSITIONNX = (UX * t);//s = ut + 0.5at^2ny = (UY * t) + (0.5 * (g) * MATH.POW (T, 2));//Apply the positions$ (self). css ({' Bottom ': (NY) + ' px ', ' Left ': (NX) + ' px '});//Increase the time by 0.10t = t + 0.10;//If the time I s greater than the total time clear the Intervalif (T > Totalt) {clicked = False;first = true;$ ('. Clipped-box '). css ({' To  P ': ' -1000px ', ' transition ': ' None '}), $ (self). css ({' Left ': ' 0 ', ' bottom ': ' 0 ', ' opacity ': ' 1 ', ' transition ': ' None ', ' Transform ': ' None '});//Finally clear the Intervalclearinterval (z);}}, 10); Run this interval every 10ms. Changing this would change the pace of the animation});}); R = setinterval (function () {//This is a bit rough but it does the jobif (first = = = True) {//I ' veJust put on so the deleted box would come down again after its been clicked.//that's the can keep pressing delete.$ ('. Clipped-box '). css ({' Top ': ' 0 ', ' transition ': '} '), $ ('. Clipped-box p '). css ({' Opacity ': ' 1 ', ' transition ': ', ' backg Round-color ': '}); $ ('. Content '). css ({' Display ': ' Block '}); first = false;}}, 300);});