Critical bug Gong

In this example below you will see how to do a Critical bug Gong with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by dormenog, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright dormenog ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Critical bug Gong</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <span id="loading">Loading audio file <i class="fa fa-spinner fa-spin"></i></span>
  <div id="gong">
    <i class="fa fa-bug" aria-hidden="true"></i>
  </div>
</div>
<i class="fa fa-gavel" id="pointer" aria-hidden="true"></i>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/dormenog/critical-bug-gong-WdZJRr */
body {
  cursor: none;
}
.container {
  position: relative;
  width: 100%;
  height: 100%;
}
#gong {
  position: relative;
  width: 20em;
  height: 20em;
  top: 5em;
  left: calc(50% - 10em);
  border-radius: 50%;
  background-color: yellow;
  border: black solid 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}
#gong:before {
  content: "";
  display: block;
  width: 0;
  height: 25rem;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid #000000;
  position: absolute;
  top: -18rem;
  left: -8rem;
  transform: rotate(-45deg);
}
#gong:after {
  content: "";
  display: block;
  width: 0;
  height: 25rem;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 12px solid #000000;
  position: absolute;
  top: -18rem;
  right: -8rem;
  transform: rotate(45deg);
}
#gong i.fa-bug {
  font-size: 10em;
}
.fa-gavel {
  font-size: 6em;
  position: absolute;
  z-index: 1000;
  color: red;
}
.fa-gavel.on {
  transform: rotateZ(75deg);
  transition: 0.5s ease;
}
.goooong {
  animation: gong 5s ease-in-out;
}
@keyframes gong {
  10%,
  90% {
    transform: translate3d(-10px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(10px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(10px, 0, 0);
  }
}


/*Downloaded from https://www.codeseek.co/dormenog/critical-bug-gong-WdZJRr */
var gongAudio = new Audio("http://sprott.physics.wisc.edu/wop/sounds/Gong.wav");
gongAudio.onloadeddata = function () {
  $('#loading').hide();
};

var gong = $('#gong');
var width = gong.width();
var height = gong.height();
var radius = width / 2;

var offset = gong.offset();
var centerX = offset.left + width / 2;
var centerY = offset.top + height / 2;

function pointInCircle(x, y) {
  return Math.sqrt((x - centerX) * (x - centerX) + (centerY - y) * (centerY - y)) < radius;
}

function doGong() {

  if (gongAudio.readyState < 4) {
    return;
  }

  gongAudio.play();

  $('#gong').addClass('goooong');
  setTimeout(function () {
    $('#gong').removeClass('goooong');
  }, 5000);
}

$(document).bind('mousemove', function (e) {
  $('#pointer').css({
    left: e.pageX + 10,
    top: e.pageY - 45
  });
}).bind('mousedown', function () {
  $('#pointer').addClass("on");
}).bind('mouseup', function (e) {
  $('#pointer').removeClass("on");
  var x = e.pageX;
  var y = e.pageY;
  if (pointInCircle(x, y)) {
    console.log('goooong');
    doGong();
  }
});

Comments