How to create Thanos’ snap and disintegrate effect on your website or any HTML element with JavaScript!
🔔 Subscribe: https://www.youtube.com/channel/UCRthRrv06q1iOl86-tTKJhg
Source Code
HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="html2canvas.min.js"></script>
<script src="chance.min.js"></script>
<script src="jquery-2.1.4.js"></script>
<script src="jquery-ui-1.9.2.custom.min.js"></script>
</head>
<body>
<div class="content">
<img src="burger.png" height="600">
<button id="start-btn">Snap!</button>
</div>
<script>
var imageDataArray = [];
var canvasCount = 35;
$("#start-btn").click(function(){
html2canvas($(".content")[0]).then(canvas => {
//capture all div data as image
ctx = canvas.getContext("2d");
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
var pixelArr = imageData.data;
createBlankImageData(imageData);
//put pixel info to imageDataArray (Weighted Distributed)
for (let i = 0; i < pixelArr.length; i+=4) {
//find the highest probability canvas the pixel should be in
let p = Math.floor((i/pixelArr.length) *canvasCount);
let a = imageDataArray[weightedRandomDistrib(p)];
a[i] = pixelArr[i];
a[i+1] = pixelArr[i+1];
a[i+2] = pixelArr[i+2];
a[i+3] = pixelArr[i+3];
}
//create canvas for each imageData and append to target element
for (let i = 0; i < canvasCount; i++) {
let c = newCanvasFromImageData(imageDataArray[i], canvas.width, canvas.height);
c.classList.add("dust");
$("body").append(c);
}
//clear all children except the canvas
$(".content").children().not(".dust").fadeOut(3500);
//apply animation
$(".dust").each( function(index){
animateBlur($(this),0.8,800);
setTimeout(() => {
animateTransform($(this),100,-100,chance.integer({ min: -15, max: 15 }),800+(110*index));
}, 70*index);
//remove the canvas from DOM tree when faded
$(this).delay(70*index).fadeOut((110*index)+800,"easeInQuint",()=> {$( this ).remove();});
});
});
});
function weightedRandomDistrib(peak) {
var prob = [], seq = [];
for(let i=0;i<canvasCount;i++) {
prob.push(Math.pow(canvasCount-Math.abs(peak-i),3));
seq.push(i);
}
return chance.weighted(seq, prob);
}
function animateBlur(elem,radius,duration) {
var r =0;
$({rad:0}).animate({rad:radius}, {
duration: duration,
easing: "easeOutQuad",
step: function(now) {
elem.css({
filter: 'blur(' + now + 'px)'
});
}
});
}
function animateTransform(elem,sx,sy,angle,duration) {
var td = tx = ty =0;
$({x: 0, y:0, deg:0}).animate({x: sx, y:sy, deg:angle}, {
duration: duration,
easing: "easeInQuad",
step: function(now, fx) {
if (fx.prop == "x")
tx = now;
else if (fx.prop == "y")
ty = now;
else if (fx.prop == "deg")
td = now;
elem.css({
transform: 'rotate(' + td + 'deg)' + 'translate(' + tx + 'px,'+ ty +'px)'
});
}
});
}
function createBlankImageData(imageData) {
for(let i=0;i<canvasCount;i++)
{
let arr = new Uint8ClampedArray(imageData.data);
for (let j = 0; j < arr.length; j++) {
arr[j] = 0;
}
imageDataArray.push(arr);
}
}
function newCanvasFromImageData(imageDataArray ,w , h) {
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
tempCtx = canvas.getContext("2d");
tempCtx.putImageData(new ImageData(imageDataArray, w , h), 0, 0);
return canvas;
}
</script>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #ddd;
}
.content {
display: flex;
align-items: center;
flex-direction: column;
background: #ddd;
}
#start-btn {
font-size: 36px;
padding: 20px 40px 20px 80px ;
margin-top: 30px;
border-radius: 10px;
background:url("thanos-logo.png") white 15px no-repeat;
background-size: 50px;
}
.dust {
position: absolute;
}
#js #javascript #html #css
37.45 GEEK