Based on HTML5 SVG's cool text explosion effects,

Based on HTML5 SVG's cool text explosion effects,

This is a cool text explosion effect made using html5 svg, css3, and js. This text effect uses the SVG path attribute to cut the text path into many small pieces, and then uses css3 and js to make the cool effect of text explosion splitting when the mouse slides over the text.

Download Online Preview source code

This is a cool text explosion effect made using html5 svg, css3, and js. Neither HTML nor CSS can split text into small pieces, but SVG can achieve this effect.

Create SVG text

You can use vector graph production tools, such as Adobe Illustrator, to turn the text into a contour, and then use the "Knife" tool to cut the text inside, so that the text is broken into many small pieces. For example:

You can then export the image to an SVG file and clear unnecessary code. You can get code similar to the following:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 475.7 162.3" id="heavy">    <path d="M72,134.1v0.9h30.5v-8.8C92,127.2,81.9,130.4,72,134.1z"/>    <path d="M102.6,113c-10.1,1.5-20.3,2.2-30.5,2.7v18.4c9.9-3.7,20-6.9,30.5-7.8V113z"/>    ...</svg>

Put the SVG code into an HTML file.

Explosive animation design

It is very difficult to manually move every letter fragment. Here we use JS to make this effect. The text is split from the center of the entire text "HEAVY", and each fragment is moved outward along the radial line of the center. if you can locate the position of each fragment, to know the distance from them to the center. Then you can easily use CSS transform to move them.

JAVASCRIPT

We cannot use standard offsetLeft to locate SVG elements. Here we use getBBox ():

var heavy = document.getElementById("heavy"),dim = heavy.getBBox(),heavyCenterX = dim.width/2,heavyCenterY = dim.height/2,force = 8;heavyPieces = document.querySelectorAll("svg#heavy path");

Next, cycle each path:

for(var i=0;i
Each Shard is assigned an id to calculate the distance from the center point to the center of the text.
Next, we need to move text fragments. If the text fragment is in the upper right corner, it will move to the right; if the text fragment is in the lower left corner, it will move to the lower left. At the same time, we need to ensure that the proportion of text fragments is smaller: the number of internal fragments is smaller, while the number of external fragments is larger. Here, force is used to reduce their distance proportionally:
if (pieceCenterX > heavyCenterX) {    var moveX = distanceX/force+"px";} else {    moveX = "-"+distanceX/force+"px";}if (pieceCenterY > heavyCenterY) {    var moveY = distanceY/force+"px";} else {    moveY = "-"+distanceY/force+"px";}
If the fragment is moving in a straight line away from the center, it will be a bit monotonous. Here, a random rotation effect is added:
var force = 8,min = -2.5,max = 2.5,randomRot = Math.floor(Math.random() * (max - min + 1)) + min;
We want to generate an explosion effect when the mouse slides over the text. We use JAVASCRIPT to switch the transform effect. In this example, the browser prefix is not added for simplicity.
document.styleSheets[0].insertRule("svg:hover #fragment"+i+" { transform: translate("+moveX+","+moveY+") rotate("+randomRot+"deg) }",1);
Now, the animation effect of the text is very stiff: After the mouse slides over the text, the text fragments directly reach their final position.
Create continuous animation effect
We hope that the final animation effect will be: Text first rapidly jitters and then splits slowly. We made a motion curve on the right based on "Ceaser.
In the figure, the horizontal axis is time, and the vertical axis is "change quantity ". What we can see is a very fast "explosion" phase, and then "explosion" will last for a long time.
The CSS bezercurve timing function is similar to the following:
svg#heavy path { fill: white; stroke: white; transition: 12s 1.6s cubic-bezier(0, 1, 0, 1); }
Production Pressure Effect
Of course, this effect can also be made using JAVASCRIPT, but here the CSS keyframe animation is used.
@keyframes shake {    0% { transform: translate(3px,5px); }    5% { transform: translate(8px,-5px); }    10% { transform: translate(-3px,2px); }    …}
Then, the animation is quickly executed as the mouse slides.
svg:hover { animation: shake 1s linear; }
Add mobile device support
To support IOS and other mobile devices, we added the following code:
var paths = document.getElementsByTagName('path')[0];    heavy.onclick = function() {    paths.onhover.call(paths);};    
Via: http://www.w2bc.com/Article/21440