tutorials > clicksposion

You have probably visited a site before where if you click the screen - something pops up. Perhaps a sound, an image, or even cute exploding strawberries like in this site !
This is a tutorial on how to achieve the same effect as my exploding strawberries. If you dont know what I`m talking about , simply click the screen . That is called a clicksposion.

STEP ONE
Choose yourself an image , preferrably not a big one , and upload it to your server.

STEP TWO
Add this script to your HTML:

<script>
var b = document.body;
var imgurl = "IMGURL";
var size = [MIN, MAX];
function rand(min, max)
{
return Math.floor(Math.random() * (max - min + 1) + min)
}
function getSize()
{
return rand(size[0], size[1]);
}
function lerp(a,b,f)
{
return (b-a)*f+a;
}
function heart(x,y)
{
var s = getSize();
x -= s/2;
y -= s/2;
x = Math.floor(x) + rand(-5, 5);
y = Math.floor(y) + rand(-5, 5);
var fx = x + rand(-40, 40);
var fy = y + rand(-40, 40);
var i = document.createElement("img");
i.src = imgurl;
i.style = `pointer-events: none; position: fixed; width: ${s}px; left: ${x}px; top: ${y}px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 1000000;`;
b.appendChild(i);
var f = 0;
var interval;
interval = setInterval(function() {
var _x = Math.floor(lerp(x, fx, f));
var _y = Math.floor(lerp(y, fy, f));
i.style = `pointer-events: none; position: fixed; width: ${s}px; left: ${_x}px; top: ${_y}px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 1000000;`;
i.style.opacity = 1-f;
f += 0.01;
if (f > 1)
{
clearInterval(interval);
b.removeChild(i);
}
}, 10);
}
function bro(x,y)
{
for (var i = 0; i < 5; i++)
{
heart(x,y);
}
}
b.addEventListener("click", function(event){
var x = event.clientX;
var y = event.clientY;
bro(x,y);
});

</script>

STEP THREE
Change "IMGURL" to your desired image url , change " MIN " to the minimum size of the clicksposion image ( in numbers ) , change " MAX " to the maximum size of the clicksposion image ( also in numbers )

And... Youre done! You now have cute clickspsion . (˶ᵔ ᵕ ᵔ˶) ♡ Congratulations!

xo xo shai