JSFiddle - React, Tailwind, and code Playground

by Craig Martin

CSS

.dot {width: 130px;height: 130px;position: absolute;/* z-index: 1 !important; */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;}

JavaScript

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

    if (isMobile.matches === false) {

setTimeout(function () {
overmenu = false;

jQuery( "#menu-topmenu *" ).hover(
  function() {
	overmenu = true;
  }, function() {
    overmenu = false;
  }
);
 
function removeDot(deldot){
jQuery('#'+deldot).addClass('animated zoomFadeOut');
setTimeout(function(){
jQuery('#'+deldot).remove();
}, 400);
}


dotid = 1;

(function() {
    "use strict";

    document.onmousemove = handleMouseMove;
    function handleMouseMove(event) {
      var dot, eventDoc, doc, body, pageX, pageY;
    
      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 > 140){
      jQuery('body').append(dot);
      jQuery('#'+dotid).delay(300).fadeOut(100);
			removeDot(dotid);
       dotid++;
			}
    }
  })();
}, 2000);

    }
    
    
    
    
    
 
    
    
    
    
    
    
 });