A JavaScript-based 3D glass break effect

Before you introduced a HTML5 canvas to achieve the picture glass fragment effect. Today to bring you a JavaScript-based 3D glass crushing effect. As follows:

Online preview Source Download

HTML code:

<id= "container">        <id= " Fragment ">        </div>    </Div  >

CSS code:

Body{Background-color:#f1f1f1;margin:0;Overflow:Hidden; }#container{position:Absolute;width:384px;Height:384px;margin:Auto; Left:0;Top:0;Bottom:0; Right:0; }. Fragment{position:Absolute;width:48px;Height:48px; }

JavaScript code:

    functioninit () {const frag_size= 48; varDefaultease =sine.easeout; varcontainer = document.getElementById (' container ')), Containerrect=container.getboundingclientrect (), Fragments=[], CenterX= 192, CenterY= 192; Tweenmax.set (container, {perspective:600    });    Createfragments ();    Createtweens ();    Startupdateloop (); functioncreatefragments () {varfragment;  for(vari = 0; I < 8; i++) {             for(varj = 0; J < 8; J + +) {Fragment= document.createelement (' div '); Fragment.classname= ' Fragment '; Tweenmax.set (fragment, {x:j*frag_size, Y:i*frag_size});                Container.appendchild (fragment);            Fragments.push (fragment); }        }    }    functionCreatetweens () {varTL =NewTimelinemax ({repeat:-1}), fragment, delay;  for(vari = 0; i < fragments.length; i++) {Fragment=Fragments[i]; Delay= 1-(i% 8) * Randomrange (0.04, 0.06); if(I < 32) {                if(i = = 0) {Tl.insert (Createspecialtween (fragment), delay); }                Else{Tl.insert (Createarctween (fragment), delay); } console.log (' D1 ', delay); }            Else{Tl.insert (Createstraighttween (fragment), delay); Console.log (' D2 ', delay); }        }    }    functionCreatespecialtween (fragment) {varBezierpoints =[{X:centerx-y:-256}, {X:centerx-Y:centery-24}            ]; varTL =NewTimelinemax (), Tween1= Tweenmax.to (fragment, 1.2, {bezier:{type:' Soft ', values:bezierpoints}, Ease:defaultease}), Tween2= Tweenmax.to (fragment, 1.2, {z:525, RotationX:360, RotationY:360, ease:defaultease});        Tl.insert (TWEEN1);        Tl.insert (TWEEN2); returntl; }    functionCreatearctween (fragment) {varDX = (centerx-fragment._gstransform.x-24), Dy= (centery-fragment._gstransform.y-24); varBezierpoints =[{x:fragment._gstransform.x, y:fragment._gstransform.y-dy}, {x:fragment._gstransform.x, y:containerrect.bottom}]; varTL =NewTimelinemax (), Tween1= Tweenmax.to (Fragment, Randomrange (3.2, 3.1), {bezier:{values:bezierpoints}, ease:defaultease}), Tween2 = Tweenmax.to (Fragment, Randomrange (3.2, 3.1), {z:randomrange (800, 1000), Rotationx:randomrange (360, 1080), Rotationy:randomrange (360, 1080), ease:defaultease});        Tl.insert (TWEEN1);        Tl.insert (TWEEN2); returntl; }    functionCreatestraighttween (fragment) {varDX = (centerx-fragment._gstransform.x-24) * 4; returnTweenmax.to (Fragment, Randomrange (3, 3.1), {x:-DX, Y:window.innerheight+ containerrect.bottom + randomrange (0, 124), Z:randomrange (* (Math.random () > 0.5 1:1), Rotationx:randomrange (360, 1080), Rotationy:randomrange (360, 1080), ease:defaultease})}functionStartupdateloop () {requestanimationframe (tick); functiontick () {varfragment, AngleX, Angley;  for(vari = 0; i < fragments.length; i++) {Fragment=Fragments[i]; AngleX= Math.Abs (fragment._gstransform.rotationx% 180-90)/180; Angley= Math.Abs (fragment._gstransform.rotationy% 180-90)/180; varL = Math.Round ((AngleX + Angley)/2 * 100); Fragment.style.backgroundColor= ' HSL (30,100%, ' + L + '%) '; Fragment.style.zIndex=Math.Round (FRAGMENT._GSTRANSFORM.Z);        } requestanimationframe (tick); }    }    functionrandomrange (min, max) {returnMin + math.random () * (Max-min); }}window.onload= init;//@ sourceurl=pen.js

Note: This article Love programming original article, reproduced please specify the original address: http://www.w2bc.com/Article/7707

A JavaScript-based 3D glass break effect