Batman Clicks

Add batman-style effects to all your click actions

by Retsam19

HTML

<div id="bam"><br><span id="text">BAM!</span></div>

CSS

#bam {
  background-color: red;
  position: fixed;
  left: -1000px;
  top: -1000px;
  color: white;
  text-align: center;
  border: 1px solid black;
}

JavaScript

var WIDTH = 60; var HEIGHT = 60;
var DELAY = 500;

var bam = document.getElementById("bam");
var bamText = document.getElementById("text");

bam.style.width = WIDTH + "px";
bam.style.height = HEIGHT + "px";

var hideTimer;

var colors = ["red", "blue", "green", "yellow"];
var onomatopoeias = ["BAM!", "BIF!", "POW!", "WHACK", "KAPOW", "BANG", "SOCK"];

document.addEventListener("click", function(evt) {
    var left = (evt.clientX - WIDTH/2);
    var top = (evt.clientY - HEIGHT/2);
    bam.style.left = left + "px";
    bam.style.top = top + "px";
    
    var word = onomatopoeias[~~(Math.random() * onomatopoeias.length)];
    text.textContent = word;
    
    var color = colors[~~(Math.random() * colors.length)];
    bam.style.backgroundColor = color;
    
    clearTimeout(hideTimer);
    hideTimer = setTimeout(function () {
        bam.style.left = "-1000px";
        bam.style.top = "-1000px";
    }, DELAY);
});