vanish-effect
Version:
A lightweight JavaScript library that creates a Thanos-inspired disintegration effect for HTML elements in vanilla JS, React, and Next.js
2 lines (1 loc) • 9.02 kB
JavaScript
;var Ct=Object.create;var _=Object.defineProperty;var Ht=Object.getOwnPropertyDescriptor;var Bt=Object.getOwnPropertyNames,Mt=Object.getOwnPropertySymbols,Rt=Object.getPrototypeOf,vt=Object.prototype.hasOwnProperty,kt=Object.prototype.propertyIsEnumerable;var xt=(i,t,o)=>t in i?_(i,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):i[t]=o,J=(i,t)=>{for(var o in t||(t={}))vt.call(t,o)&&xt(i,o,t[o]);if(Mt)for(var o of Mt(t))kt.call(t,o)&&xt(i,o,t[o]);return i};var Lt=(i,t)=>{for(var o in t)_(i,o,{get:t[o],enumerable:!0})},wt=(i,t,o,b)=>{if(t&&typeof t=="object"||typeof t=="function")for(let a of Bt(t))!vt.call(i,a)&&a!==o&&_(i,a,{get:()=>t[a],enumerable:!(b=Ht(t,a))||b.enumerable});return i};var Xt=(i,t,o)=>(o=i!=null?Ct(Rt(i)):{},wt(t||!i||!i.__esModule?_(o,"default",{value:i,enumerable:!0}):o,i)),Yt=i=>wt(_({},"__esModule",{value:!0}),i);var Nt={};Lt(Nt,{Thanos:()=>Y});module.exports=Yt(Nt);var St=Xt(require("html2canvas"));function qt(i,t){let o=console.warn,b=console.error,a=n=>typeof n=="string"&&(n.includes("document.write")||n.includes("Avoid using document.write")||n.includes("Violation"));return console.warn=function(...n){n.length>0&&a(n[0])||o.apply(console,n)},console.error=function(...n){n.length>0&&a(n[0])||b.apply(console,n)},(0,St.default)(i,t).finally(()=>{console.warn=o,console.error=b})}var Y=class{static getVectorAngle(t=0,o=-1,b=.5,a=.5){let n=Math.sqrt(t*t+o*o),s=n>0?t/n:0,r=n>0?o/n:-1,S=Math.atan2(r,s);if(a>=.95)return{baseAngle:0,spread:Math.PI*2};if(a<.1)return{baseAngle:S,spread:.1*b};let P=Math.PI*b*a;return{baseAngle:S,spread:P}}static directionToVector(t){switch(t){case"up":return{x:0,y:-1};case"down":return{x:0,y:1};case"left":return{x:-1,y:0};case"right":return{x:1,y:0};default:return{x:0,y:-1}}}static easeOutQuad(t){return t*(2-t)}static snap(t,o={}){let b=J(J({},this.defaultOptions),o),{duration:a=.8,direction:n="up",vectorX:s=0,vectorY:r=-1,onComplete:S,onStart:q,particleDensity:P=1,angleVariation:H=.5,removeFromDOM:N=!1,randomness:p=.5,animated:Z=!0}=b;if(o.direction&&o.vectorX===void 0&&o.vectorY===void 0){let B=this.directionToVector(n);s=B.x,r=B.y}return new Promise(B=>{var pt;let tt=performance.now(),y=document.createElement("canvas"),c=y.getContext("2d",{alpha:!0});if(!c){console.error("Could not get canvas context"),B();return}q&&q();let D=t.getBoundingClientRect(),at=D.height,Pt=D.width,Tt=window.getComputedStyle(t).marginTop,Ot=window.getComputedStyle(t).marginBottom,Wt=t.style.transition,$t=t.style.overflow,ht=window.getComputedStyle(t).display,Ft=window.getComputedStyle(t).position,zt=window.getComputedStyle(t).pointerEvents,O=300;y.width=D.width+O*2,y.height=D.height+O*2;let f=document.createElement("div");f.style.position="fixed",f.style.left=D.left-O+"px",f.style.top=D.top-O+"px",f.style.width=y.width+"px",f.style.height=y.height+"px",f.style.pointerEvents="none",f.style.zIndex="10000",f.style.overflow="visible",f.style.willChange="transform",y.style.position="absolute",y.style.left="0",y.style.top="0",y.style.overflow="visible",y.style.willChange="transform",f.appendChild(y),document.body.appendChild(f);let l=null;Z?(l=document.createElement("div"),l.style.height=`${at}px`,l.style.width=`${Pt}px`,l.style.marginTop=Tt,l.style.marginBottom=Ot,l.style.transition=`height ${a}s cubic-bezier(0.25, 1, 0.5, 1), margin ${a}s cubic-bezier(0.25, 1, 0.5, 1)`,l.style.overflow="hidden",l.style.display=ht==="inline"?"inline-block":ht,(pt=t.parentNode)==null||pt.insertBefore(l,t),l.offsetHeight,l.style.height="0px",l.style.marginTop="0px",l.style.marginBottom="0px"):(t.style.position="absolute",t.style.visibility="hidden",t.style.pointerEvents="none"),qt(t,{backgroundColor:null,scale:1,logging:!1,useCORS:!0}).then(d=>{Z&&(t.style.position="absolute",t.style.visibility="hidden",t.style.pointerEvents="none");let W=d.getContext("2d").getImageData(0,0,d.width,d.height).data,{baseAngle:j,spread:At}=this.getVectorAngle(s,r,H,p),Et=350;console.log(`Vector: (${s}, ${r}), Base Angle: ${j}, Spread: ${At}, AngleVariation: ${H}, Randomness: ${p}`),c.drawImage(d,O,O);let It=1e5,yt=d.width*d.height,ut=Math.min(1,It/yt),Dt=yt<4e4,st=1e4,V=Dt?Math.max(1,Math.round(1/(P*ut*4))):Math.max(1,Math.round(1/(P*ut*3))),gt=Math.ceil(d.width/V*(d.height/V)*P*.8);if(gt>st){let u=Math.sqrt(gt/st);V=Math.max(1,Math.ceil(V*u))}let Vt=Math.min(st,Math.ceil(d.width/V*(d.height/V)*P*.8)),R=new Array(Vt),ft=0;for(let u=0;u<d.height;u+=V)for(let h=0;h<d.width;h+=V){let k=(u*d.width+h)*4;if(W[k+3]<5||Math.random()>P*.98)continue;let C=Math.random()<.7?Math.random()<.5?3:2:1;for(let L=0;L<C;L++){let et=(Math.random()-.5)*4,dt=(Math.random()-.5)*4,X;if(p>=.95)X=Math.random()*Math.PI*2;else if(p>.1){let A=j,E=Math.PI*H*p,$;if(n==="up"||n==="down"){let T=Math.random(),m=Math.random();$=T-m}else $=Math.random()*2-1;X=A+$*E}else{let A=(Math.random()-.5)*.2*H;X=j+A}let G=h/d.width,K=u/d.height,F;Math.abs(r)>Math.abs(s)?F=r<0?K:1-K:Math.abs(s)>Math.abs(r)?F=s<0?G:1-G:F=(G+K)/2,F=F*.7+Math.random()*.3;let bt=p>=.95?.6:.4,z=p>=.95?2:1.5,it=bt+Math.random()*z,Q=Et*it,U=p>=.95?.3:.5,nt=p>=.95?3:2,e=U+Math.random()*(nt-U),x=Math.random()*Math.PI*2,v=p>=.95?30:20,g=(Math.random()-.5)*v;R[ft++]={x:h+et+O,y:u+dt+O,color:`rgba(${W[k]},${W[k+1]},${W[k+2]},${W[k+3]/255})`,velocity:{x:Math.cos(X)*Q,y:Math.sin(X)*Q},size:e,rotation:x,rotationSpeed:g,opacity:1,delayFactor:F}}}R.length=ft;let mt=performance.now(),rt=0,lt=performance.now(),ot=60,ct=u=>{rt++,u-lt>500&&(ot=Math.round(rt/(u-lt)*1e3),rt=0,lt=u);let h=Math.min(.05,(u-mt)/1e3),k=(u-tt)/1e3,C=Math.min(1,k/a),L=this.easeOutQuad(C),et=p>=.95?200:150,dt=Math.cos(j)*et*L,X=Math.sin(j)*et*L,G=(Math.random()*2-1)*10*L,K=(Math.random()*2-1)*10*L;if(f.style.transform=`translate3d(${dt+G}px, ${X+K}px, 0)`,ot<40&&u%2!==0){for(let M=0;M<R.length;M++){let e=R[M],x=p>=.95?120:80,v=0,g=0;r<-.5?g=x:r>.5?g=x*.5:g=x*.7,Math.abs(s)>.7&&(v=-s*x*.2),e.velocity.y+=g*h,e.velocity.x+=v*h,e.x+=e.velocity.x*h,e.y+=e.velocity.y*h,e.rotation+=e.rotationSpeed*h}requestAnimationFrame(ct);return}c.clearRect(0,0,y.width,y.height),C<.05&&(c.globalAlpha=1-C*20,c.drawImage(d,O,O),c.globalAlpha=1);let F=.1,bt=Math.max(0,(C-F)/(1-F)),z={},it=2,Q=0,U=ot<50?3e3:5e3;for(let M=0;M<R.length;M++){let e=R[M],x=e.delayFactor||0,v=Math.max(0,(C-x*.4)/(1-x*.4));if(v<=0)continue;let g=p>=.95?120:80,A=0,E=0;if(r<-.5?E=g:r>.5?E=g*.5:E=g*.7,Math.abs(s)>.7&&(A=-s*g*.2),e.velocity.y+=E*h,e.velocity.x+=A*h,e.x+=e.velocity.x*h,e.y+=e.velocity.y*h,e.rotation+=e.rotationSpeed*h,e.opacity=Math.max(0,1-v*.8),e.opacity<.01)continue;let $=ot<50?.2+v*.3:.05+v*.2;if(R.length>U&&Math.random()>1-$)continue;let T=Math.floor(e.opacity*it)/it;if(z[T]||(z[T]={}),z[T][e.color]||(z[T][e.color]=[]),z[T][e.color].push(e),Q++,Q>=U)break}let nt=Object.keys(z);for(let M=0;M<nt.length;M++){let e=parseFloat(nt[M]),x=z[e];c.globalAlpha=e;let v=Object.keys(x);for(let g=0;g<v.length;g++){let A=v[g],E=x[A];c.fillStyle=A;let $=[],T=[];for(let m=0;m<E.length;m++){let w=E[m];w.size<1.2?$.push(w):T.push(w)}if($.length>0)for(let m=0;m<$.length;m++){let w=$[m],I=w.size*1.2;c.fillRect(w.x-I/2,w.y-I/2,I,I)}for(let m=0;m<T.length;m++){let w=T[m];c.save(),c.translate(w.x,w.y),c.rotate(w.rotation);let I=w.size*1.3;c.fillRect(-I/2,-I/2,I,I),c.restore()}}}mt=u,C<1?requestAnimationFrame(ct):(f.remove(),l&&l.parentNode&&l.parentNode.removeChild(l),N?t.parentNode&&t.parentNode.removeChild(t):(t.style.display="none",t.style.visibility="",t.style.overflow=$t,t.style.position=Ft,t.style.pointerEvents=zt),S&&S(),B())};requestAnimationFrame(ct)})})}static _fadeIn(t,o={}){let b=J(J({},this.defaultInternalFadeInOptions),o),{duration:a=.8,delay:n=0,onComplete:s,onStart:r,animated:S=!0,initialScale:q=.95,easing:P="ease-out"}=b;return new Promise(H=>{let N=t.style.display||"",p=t.style.visibility||"",Z=t.style.opacity||"",B=t.style.transform||"",tt=t.style.height||"",y=t.style.overflow||"",c=t.style.transition||"",D=window.getComputedStyle(t).height;if(t.style.opacity="0",t.style.transform=`scale(${q})`,t.style.display=N==="none"?"block":N,t.style.visibility="visible",!S){t.style.opacity=Z||"1",t.style.transform=B,r&&r(),s&&s(),H();return}S&&(N==="none"||p==="hidden")&&(t.style.height="0",t.style.overflow="hidden"),t.offsetHeight,r&&r(),t.style.transition=`opacity ${a}s ${P} ${n}s, transform ${a}s ${P} ${n}s${S?`, height ${a}s ${P} ${n}s`:""}`,setTimeout(()=>{t.style.opacity="1",t.style.transform="scale(1)",S&&t.style.height==="0px"&&(t.style.height=D)},20);let at=(a+n)*1e3;setTimeout(()=>{t.style.transition=c,t.style.overflow=y,S&&t.style.height!==tt&&(t.style.height=tt),s&&s(),H()},at+50)})}};Y.defaultOptions={duration:.8,direction:"up",vectorX:0,vectorY:-1,animated:!0,particleDensity:1,angleVariation:.5,removeFromDOM:!1,randomness:.5},Y.defaultInternalFadeInOptions={duration:.8,delay:0,animated:!0,initialScale:.95,easing:"ease-out"};if(typeof window!="undefined"){let i={snap:Y.snap.bind(Y)};window.Thanos=i,console.log("thanossnap library loaded, Thanos.snap is available")}0&&(module.exports={Thanos});