Based on HTML5 SVG cool text explosion effect

This is a cool text explosion effect made with HTML5 SVG, CSS3 and JS. This text effect uses the SVG path property to cut the text path to many small pieces, and then uses CSS3 and JS to create a cool effect of splitting the text when the mouse slides over the text.

Online preview Source Download

This is a cool text explosion effect made with HTML5 SVG, CSS3 and JS. Neither HTML nor CSS has the ability to split the text into small chunks, but SVG can achieve this effect.

Making SVG text

You can use vector graph authoring tools, such as Adobe Illustrator, to turn text into outlines, and then use the "knife" tool to cut inside the text so that the text is broken into a lot of small pieces. Such as:

You can then export the image to an SVG file and clean out the extra code. You can get code similar to the following:

<svgxmlns= "Http://www.w3.org/2000/svg"ViewBox= "0 0 475.7 162.3"ID= "Heavy">    <PathD= "m72,134.1v0.9h30.5v-8.8c92,127.2,81.9,130.4,72,134.1z"/>    <PathD= "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 this SVG code in an HTML file.

Explosion Animation Design

If you want to manually move each letter fragment is very difficult thing, here use JS to make this effect. The text will explode from the center of the entire text "HEAVY", and each fragment will move outward along the center of the line, and if the location of each fragment can be located, it will be able to know the distance to the center. Then you can easily use CSS transform to move them.

Javascript

We cannot use the standard offsetleft to locate SVG elements, we are using getbbox ():

var heavy = document.getElementById ("heavy"== Dim.width/2,heavycentery = DIM.HEIGHT/2, force = 8= Document.queryselectorall ("Svg#heavy path");

Next loop each path:

 for (var i=0;i) {    = heavypieces[i];     = "Fragment" +i;     var bbox = piece.getbbox (),    = bbox.x + (BBOX.WIDTH/2),    piececentery = bbox.y + (bbox.height/ 2),    Distancex = Math.Abs (Heavycenterx- Piececenterx),    = Math.Abs (Heavycentery-  Piececentery);    ...}

Each fragment is given an ID that is used to compute the distance between the point and the text to the center.

Next, we want to move the text fragments. If the text fragment is in the upper-right corner, it moves up to the right, and if the text fragment is in the lower-left corner, it moves down to the left. At the same time, we want to ensure that the text fragment movement ratio: the internal debris movement less, and the external fragments to move more. Here, Force is used to proportionally reduce their distance:

if (Piececenterx > heavycenterx) {    varelse  {    = "-" +distancex/force+ "px" ; }if (Piececentery > heavycentery) {    varelse  {    = "-" +distancey/force+ "px";}

If the fragment is just moving in a straight line away from the center effect will be a bit monotonous, here is a little bit of a random rotation effect:

var force = 8= -2.5= 2.5= Math.floor (Math.random () * (Max-min + 1)) + min;

We want to create an explosion effect when the mouse slides over the text, and we use JavaScript to switch the transform effects, in the example, without adding a browser prefix for simplicity.

Document.stylesheets[0].insertrule ("Svg:hover #fragment" +i+ "{transform:translate (" +movex+ "," +movey+ ") rotate (" + randomrot+ "deg)}", 1);

Now, the animation of the text is very blunt: the mouse over the text after the text fragments directly to their final position.

Create a continuous animation effect

We want to end up with an animated effect: The text first shakes quickly, then the explosion splits slowly. We made the right motion curve according to the "Ceaser".

The horizontal axis is the time, and the vertical axis is the "number of changes". You can see a very fast "explode" phase, and then the "explode" will last for a long time.

The CSS Bezier curve timing function looks like this:

Svg#heavy path {fill:white; stroke:white; transition:12s 1.6s cubic-bezier (0, 1, 0, 1);}

Make pressure effect

This effect can also be made using JavaScript, but the CSS keyframe animations are used here.

@keyframes Shake {    0% {transform:translate (3px,5px);}     5% {transform:translate (8px,-5px);}     10% {transform:translate (-3px,2px);}    ...}

Then quickly perform animations when the mouse is out of date.

svg:hover {animation:shake 1s linear;}

Add support for mobile devices

To support iOS and other mobile devices, we added the following code:

var paths = document.getelementsbytagname (' path ') [0];     function () {    paths.onhover.call (paths);};    

via:http://www.w2bc.com/article/21440

Based on HTML5 SVG cool text explosion effect