Fragment splicing action of arbitrary elements based on clip-path (from Xin space)

First, the realization principle.

The effect is essentially CSS3 animation, that is, rotation transform:rotate and displacement: Transform:translate, only the parts of rotation and displacement are triangular fragments. The triangle is cut out using CSS3 clip-path.

JS to cut the elements into a isosceles right triangle, and then randomly distributed in four weeks, and then through the CSS3 animation animation, so that all the elements in four weeks to return to the position.

So, the core CSS is as follows:

. Clip[style] {

opacity:0;

}

. Active. clip[style]{

Will-change:transform;

Animation:notransform. 5s both;

}

@keyframes Notransform {

to {

Opacity:1;

Transform:translate3d (0,0,0) rotate (0);

}

}

Among them, the will-change effect still makes the animation smoother.

. Active. Clip[style] This CSS means that, as long as the parent of the clipped triangles has the type name active, the positions of all the triangles are not randomly distributed, but are returned to their original positions as animations. Yes, it is all, there is no need to animate each cut of the triangular fragment.

With toggle type Active, the effects of fragmentation can be rendered continuously.

Second, encapsulate a clipping method.

/** * @description fragmentation of arbitrary elements, with CSS can have a fragment stitching effect more content seehttp://www.zhangxinxu.com/wordpress/?p=5426* @author zhangxinxu (. com) * @license MIT [retain This paragraph note information attribution]*/varClippath=function (t) {if(!t) {return false}t.removeattribute ("ID");varR={height:t.clientheight,width:t.clientwidth,distance: -, html:t.outerhtml};if(window.getComputedStyle (document.body). Webkitclippath) {varA=r.distance,n=r.width,e=r.height;varo=""; for(varI=0; i<n;i+=a) { for(varH=0; h<e;h+=a) {varD=[I,H],U=[I,H+A],L=[I+A,H+A],V=[I+A,H];varc=[i+a/2, h+a/2];varM=[[d,c,v],[d,u,c],[c,u,l],[v,c,l]];m.foreach (function (t,a) {varN=t.map (function (t) {returnT.map (function (t) {returnt+"px"}). Join (" ")}). Join ();varE="-webkit-clip-path:polygon ("+n+");";varI=math.random ();varH=i<.5?-1:1;varu=[ -*(.5-math.random ()), -*(.5-math.random ())];varL="Translate ("+u.map (function (t) {returnt+"px"}). Join () +") Rotate ("+math.round (h* the*math.random ()) +"deg)";varv="-webkit-transform:"+l+"; Transform:"+l+";"; O=o+r.html.replace ('">','"style="'+e+v+'">')})}}t.parentnode.innerhtml=r.html+o;return true}Else{t.classname+="No-clipath";return false}};

Among them, the ele DOM element, the clipPath method is based on native JS writing, do not rely on other JS framework, for unsupported clip-path browsers have no effect. The return value is a Boolean value true or false that returns a true browser support clip-path that is false not supported.

The larger the size of the fragment in the code, the greater the fragmentation, the greater the distance:60 test of performance.

For example, the use of text and pictures in the demo:

var eletext = document.getElementById (' text '),    eleimage = document.getElementById (' image ');    Fragment effect initialization clippath (Eletext); Clippath (eleimage);

It is important to note that:

1. It is important to apply the absolute absolute positioning element to the dynamic effect. The effect must be, and secondly, performance considerations;
2. The application of dynamic elements should not be too complex, may have a test of performance;
3. The original is used to crush the elements have been in, so that the gap between the stitching is not visible!

Fragment splicing action of arbitrary elements based on clip-path (from Xin space)