JSFiddle - React, Tailwind, and code Playground

mega suite mouse

by Craig Martin

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
<body style="background:#15151b;">
<canvas id="c"></canvas>

<div id='menu-topmenu' style="background:#fff; padding:15px; heigth:80px;">
  <a href="#">ddddddddddd</a><div id="speedometer"></div>
  </div>

 
</body>

CSS

.dot {
width: 130px;
height: 130px;
position: absolute;
background-size:contain;
background-repeat:no-repeat;
background: -moz-radial-gradient(center, ellipse cover, rgba(168, 33, 71, 0.45) 0%, rgba(168, 33, 71, 0.46) 2%, rgba(159,42,80,0) 67%, rgba(155,46,84,0) 100%);
background: -webkit-radial-gradient(center, ellipse cover, rgba(168, 33, 71, 0.48) 0%,rgba(168, 33, 71, 0.48) 2%,rgba(159,42,80,0) 67%,rgba(155,46,84,0) 100%);
background: radial-gradient(ellipse at center, rgba(168, 33, 71, 0.46) 0%,rgba(168, 33, 71, 0.47) 2%,rgba(159,42,80,0) 67%,rgba(155,46,84,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91a82147', endColorstr='#009b2e54',GradientType=1 );
z-index: -1;
}

#megasuitebanner {
    position: absolute;
    float: left;
}
.msm_dark {
		color: #fff;
	padding: 10px 15px;
	background: rgb(76,76,76);
	background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(102,102,102,1) 3%, rgba(102,102,102,1) 3%, rgba(71,71,71,1) 18%, rgba(71,71,71,1) 18%, rgba(71,71,71,1) 18%, rgba(44,44,44,1) 33%, rgba(44,44,44,1) 33%, rgba(44,44,44,1) 34%, rgba(44,44,44,1) 34%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);
	background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(102,102,102,1) 3%,rgba(102,102,102,1) 3%,rgba(71,71,71,1) 18%,rgba(71,71,71,1) 18%,rgba(71,71,71,1) 18%,rgba(44,44,44,1) 33%,rgba(44,44,44,1) 33%,rgba(44,44,44,1) 34%,rgba(44,44,44,1) 34%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
	background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(102,102,102,1) 3%,rgba(102,102,102,1) 3%,rgba(71,71,71,1) 18%,rgba(71,71,71,1) 18%,rgba(71,71,71,1) 18%,rgba(44,44,44,1) 33%,rgba(44,44,44,1) 33%,rgba(44,44,44,1) 34%,rgba(44,44,44,1) 34%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%);
	width: auto;
	height: auto;
	border: 1px #e53164...

JavaScript

jQuery( document ).ready(function() {      
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");

    if (isMobile.matches) {
    //Conditional script here
setTimeout(function () {
overmenu = false;

jQuery( "#menu-topmenu *" ).hover(
  function() {
	overmenu = true;
  }, function() {
    overmenu = false;
  }
);

function removeMSM(){
setTimeout(function(){
jQuery('#megasuitebanner').addClass('animated zoomFadeOut').delay(12000).remove();
msm_active = false;
				if(msm_bnr_html){
				msm_active = true;
				}

}, 4000);
}
 
function removeDot(deldot){
jQuery('#'+deldot).addClass('animated zoomFadeOut');
setTimeout(function(){
jQuery('#'+deldot).remove();
}, 400);
}

msm_bnr_html = '<h1>megasuitebanner</h1>';		
dotid = 1;


(function() {
    "use strict";
    document.onmousemove = handleMouseMove;
    function handleMouseMove(event) {
      var dot, eventDoc, doc, body, pageX, pageY, msm_active;
		msm_bnr_html = '<h1>megasuitebanner</h1>';		


					if(jQuery('#megasuitebanner').length === 0){
					jQuery('body').append('<div id="megasuitebanner" class="msm_dark animated" style="display:none;"></div>');
					}


      event = event || window.event;

      if (event.pageX == null && event.clientX != null) {
        eventDoc = (event.target && event.target.ownerDocument) || document;
        doc = eventDoc.documentElement;
        body = eventDoc.body;

        event.pageX = event.clientX +
          (doc && doc.scrollLeft || body && body.scrollLeft || 0) -
          (doc && doc.clientLeft || body && body.clientLeft || 0);
        event.pageY = event.clientY +
          (doc && doc.scrollTop  || body && body.scrollTop  || 0) -
          (doc && doc.clientTop  || body && body.clientTop  || 0 );
      }
      dot = document.createElement('div');
      dot.id = dotid;
      dot.className = "dot animated fadeIn";
      dot.style.left = event.pageX - 65 +"px";
      dot.style.top = event.pageY - 65 + "px";

			if(overmenu === false && event.pageY >...