thanos-end-game/thanosjs.min.js

A custom web component to make your html element disappear with one snap of thanos. But unlike thanos power, this componentdoes not bring back the dead. Use it wisely. :)

class ThanosSnap extends HTMLElement{constructor(){super()}connectedCallback(){loadCss(this),loadExternal(["html2canvas.js","chance.js"]).then(()=>{let t=!!this.hasAttribute("weapon")&&this.getAttribute("weapon"),e=!!this.hasAttribute("object")&&this.getAttribute("object");t&&e&&initial(e,t)})}}function loadCss(t){const e=document.createElement("link");e.setAttribute("rel","stylesheet"),e.setAttribute("type","text/css"),e.setAttribute("href","thanos-snap.css"),document.getElementsByTagName("head")[0].appendChild(e)}function loadExternal(t){console.log(t);const e=t.map(t=>createPromise(t));return Promise.all(e)}function createPromise(t){return new Promise((e,a)=>{const n=createScript(t);document.body.appendChild(n),n?e("loaded"):a("failed to load")})}function createScript(t){const e=document.createElement("script");return e.setAttribute("type","text/javascript"),e.setAttribute("src",`scripts/${t}`),e}function weightedRandomDistrib(t,e){var a=[],n=[];for(let s=0;s<e;s++)a.push(Math.pow(e-Math.abs(t-s),3)),n.push(s);return chance.weighted(n,a)}function animateBlur(t,e,a){$({rad:0}).animate({rad:e},{duration:a,easing:"easeOutQuad",step:function(e){t.css({filter:"blur("+e+"px)"})}})}function animateTransform(t,e,a,n,s){var i=tx=ty=0;$({x:0,y:0,deg:0}).animate({x:e,y:a,deg:n},{duration:s,easing:"easeInQuad",step:function(e,a){"x"==a.prop?tx=e:"y"==a.prop?ty=e:"deg"==a.prop&&(i=e),t.css({transform:"rotate("+i+"deg)translate("+tx+"px,"+ty+"px)"})}})}function createBlankImageData(t,e,a){for(let n=0;n<e;n++){let e=new Uint8ClampedArray(t.data);for(let t=0;t<e.length;t++)e[t]=0;a.push(e)}}function newCanvasFromImageData(t,e,a){var n=document.createElement("canvas");return n.width=e,n.height=a,tempCtx=n.getContext("2d"),tempCtx.putImageData(new ImageData(t,e,a),0,0),n}function initial(t,e){var a=[];$(`#${e}`).click(function(){html2canvas($(`#${t}`)[0]).then(e=>{ctx=e.getContext("2d");var n=ctx.getImageData(0,0,e.width,e.height),s=n.data;createBlankImageData(n,35,a);for(let t=0;t<s.length;t+=4){let e=Math.floor(t/s.length*35),n=a[weightedRandomDistrib(e,35)];n[t]=s[t],n[t+1]=s[t+1],n[t+2]=s[t+2],n[t+3]=s[t+3]}const i=document.querySelector(`#${t}`);let r=i.clientHeight,o=i.clientWidth;i.innerHTML="",i.style.height=`${r}px`,i.style.width=`${o}px`,i.classList.add("iron-man");for(let t=0;t<35;t++){let n=newCanvasFromImageData(a[t],e.width,e.height);n.classList.add("dust"),i.appendChild(n)}$(`#${t}`).children().not(".dust").fadeOut(5e3),$(".dust").each(function(t){animateBlur($(this),.8,800),setTimeout(()=>{animateTransform($(this),100,-100,chance.integer({min:-15,max:15}),800+110*t)},70*t),$(this).delay(70*t).fadeOut(110*t+800,"easeInQuint",()=>{$(this).remove()})})})})}customElements.define("thanos-snap",ThanosSnap);