mouse trail

by salt

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="mouse-trail" onmouseout="mouseOut()">
   <div class="circle">
       <span class="text">DRAG</span>
   </div>
</div>

<div class="swiper-slide">

</div>

CSS

.mouse-trail {
  position: fixed;
  z-index:1;
  font-size:12px;
  font-weight:600;
}
.mouse-trail .circle{
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background-color: #ffcc00;
   pointer-events: none;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
}
.mouse-trail .text {
    opacity:0;
    pointer-events: none;
}
.mouse-trail.click .circle{
  transform:scale(0.65, 0.65)!important;
}
.mouse-trail.drag  .circle{
  transform:scale(1.5);
}
.mouse-trail.drag .text {
  opacity:1;
}

.swiper-slide {
  width: 300px;
  height: 150px;
  background-color: #ccc;
  position:relative;
}

JavaScript

document.addEventListener('mousemove', function(ev){
    $(".mouse-trail")[0].style.transform = 'translateY('+(ev.clientY-30)+'px)';
    $(".mouse-trail")[0].style.transform += 'translateX('+(ev.clientX-30)+'px)';
    if($(ev.target).hasClass("swiper-slide")){
         $(".mouse-trail").addClass("drag");
         console.log("over")
     }
},false);

$(".mouse-trail")
.on("mousedown", function(e){
   $(this).addClass("click")
})
.on("mouseup", function(e){
   $(this).removeClass("click")
});

function mouseOut(){
  if($(".mouse-trail").hasClass("drag")){
      $(".mouse-trail").removeClass("drag"); 
  }
}