Share a css3 special effect code for click explosion and whereabouts

A jquery+css3 special effect with simple code and obvious effect. Clicking on the div block will automatically break and scatter to the bottom of the web page.

[Picture]

[Code]

$(document).ready(function() {
	// Generate the clips. In this case I'm using 5 (or 25 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 amount
		var totalSquares = Math.pow(amount, 2);
		
		// The HTML of the content
		var html = $t.find('.content').html();
		
		var y = 0;
		
		for(var z = 0; z <= (amount*width); z = z+width) { 
		
			$(&#39;<p class="clipped" style="clip: rect(&#39;+y+&#39;px, &#39;+(z+width)+&#39;px, &#39;+(y+height)+&#39;px, &#39;+z+&#39;px)">&#39;+html+&#39;</p>&#39;).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 numbers
	function rand(min, max) {
		
		return Math.floor(Math.random() * (max - min + 1)) + min;
		
	}
	
	// A variable check for when the animation is mostly over
	var first = false,
		clicked = false;
	
	// On click
	$(&#39;.clipped-box p&#39;).on(&#39;click&#39;, function() {
		
		if(clicked === false) {
			
			clicked = true;
			
			$(&#39;.clipped-box .content&#39;).css({&#39;display&#39; : &#39;none&#39;});	
	
			// Apply to each clipped-box p.
			$(&#39;.clipped-box p:not(.content)&#39;).each(function() {
				
				// So the speed is a random speed between 90m/s and 120m/s. I know that seems like a lot
				// But otherwise it seems too slow. That&#39;s due to how I handled the timeout.
				var v = rand(120, 90),
					angle = rand(80, 89), // The angle (the angle of projection) is a random number between 80 and 89 degrees.
					theta = (angle * Math.PI) / 180, // Theta is the angle in radians
					g = -9.8; // And gravity is -9.8. If you live on another planet feel free to change
					
				// $(this) as self
				var self = $(this);
				
				// time is initially zero, also set some random variables. It&#39;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 be 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 shapes position
				var randDeg = rand(-5, 10), 
					randScale = rand(0.9, 1.1),
					randDeg2 = rand(30, 5);
				
				// Because box shadows are a bit laggy (by a bit I mean &#39;box shadows will not work on inpidual clipped ps at all&#39;) 
				// we&#39;re altering the background colour slightly manually, in order to give the ps differentiation when they are
				// hovering around in the air.
				var color = $(this).css(&#39;backgroundColor&#39;).split(&#39;rgb(&#39;)[1].split(&#39;)&#39;)[0].split(&#39;, &#39;),
					colorR = rand(-20, 20),  // You might want to alter these manually if you change the color
					colorGB = rand(-20, 20),  // To get the right consistency.
					newColor = &#39;rgb(&#39;+(parseFloat(color[0])+colorR)+&#39;, &#39;+(parseFloat(color[1])+colorGB)+&#39;, &#39;+(parseFloat(color[2])+colorGB)+&#39;)&#39;;
				
				
				// And apply those
				$(this).css({
					&#39;transform&#39; : &#39;scale(&#39;+randScale+&#39;) skew(&#39;+randDeg+&#39;deg) rotateZ(&#39;+randDeg2+&#39;deg)&#39;, 
					&#39;background&#39; : newColor
				});
				 
				// Set an interval
				z = setInterval(function() { 	
					
					// Horizontal speed is constant (no wind resistance on the internet)
					var ux = ( Math.cos(theta) * v ) * direction;
					
					// Vertical speed decreases as time increases before reaching 0 at its peak
					var uy = ( Math.sin(theta) * v ) - ( (-g) * t);
					
					// The horizontal position
					nx = (ux * t);
							
					// s = ut + 0.5at^2
					ny = (uy * t) + (0.5 * (g) * Math.pow(t, 2));
					
					// Apply the positions	
					$(self).css({&#39;bottom&#39; : (ny)+&#39;px&#39;, &#39;left&#39; : (nx)+&#39;px&#39;});
					
					// Increase the time by 0.10
					t = t + 0.10;
					
					// If the time is greater than the total time clear the interval
					if(t > totalt) {
						
						clicked = false;
						first = true;
						
						
						$(&#39;.clipped-box&#39;).css({&#39;top&#39; : &#39;-1000px&#39;, &#39;transition&#39; : &#39;none&#39;});
						$(self).css({&#39;left&#39; : &#39;0&#39;, &#39;bottom&#39; : &#39;0&#39;, &#39;opacity&#39; : &#39;1&#39;, &#39;transition&#39; : &#39;none&#39;, &#39;transform&#39; : &#39;none&#39;});
					
								
						// Finally clear the interval
						clearInterval(z);
					
					}
					
				}, 10); // Run this interval every 10ms. Changing this will change the pace of the animation
		
			});
			
		}
	
	});			
	r = setInterval(function() {
		// This is a bit rough but it does the job
		if(first === true) {
			// I&#39;ve just put this in so the deleted box will come down again after its been clicked.
			// That way you can keep pressing delete.			
			$(&#39;.clipped-box&#39;).css({&#39;top&#39; : &#39;0&#39;, &#39;transition&#39; : &#39;&#39;});
			$(&#39;.clipped-box p&#39;).css({&#39;opacity&#39; : &#39;1&#39;, &#39;transition&#39; : &#39;&#39;, &#39;background-color&#39; : &#39;&#39;});
						
			$(&#39;.content&#39;).css({&#39;display&#39; : &#39;block&#39;});
				
			first = false;
			
		}
				
	}, 300);
});

The above is the detailed content of Share a css3 special effect code for click explosion and whereabouts. For more information, please follow other related articles on the PHP Chinese website!