Home  >  Article  >  Web Front-end  >  Share a css3 special effect code for click explosion and whereabouts

Share a css3 special effect code for click explosion and whereabouts

零下一度
零下一度Original
2017-04-26 17:39:143131browse

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]

Share a css3 special effect code for click explosion and whereabouts

[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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn