Im making a circle follow the cursor using jquery which works fine but i was wondering if there was a way so that the circle fades out whenever the mouse stops.

I have tried using mouseout funtion of jquery and making the opacity 0 but it would just stop the circle in between whenever the mouse stops which is obvious but is there some other method to achieve this ?

My jquery code -

 var mouseX = 0, mouseY = 0;
   var xp = 0, yp = 0;
        
  $(document).mousemove(function(e){
    
    $("#circlecc").css({opacity: 1})
     
    mouseX = e.pageX - 12;
    mouseY = e.pageY - 12;
    
  });

  setInterval(function(){

    xp  = ((mouseX - xp)/6);
    yp  = ((mouseY - yp)/6);
    $("#circlecc").css({left: xp  'px', top: yp  'px'});
    
  }, 20);

Also while moving the cursor below the site or beyond the site the circle goes beyond the site too and adds a scroll bar, is there a way to avoid that

The Website

CodePudding user response：

The approach is correct. However, there are a few things that can be done differently.

1. A setInterval keeps on running to update the cursor position, even when the mouse is not moving - which will impact the performance. Instead of using setInterval, use setTimeout to update the cursor position when mouse movement is detected.
2. To update the cursor position, use transform property over position top and left, because transform will use hardware acceleration if possible and will perform better.
3. Use clientX and clientY instead of pageX and pageY to detect cursor position. See What is the difference between screenX/Y, clientX/Y and pageX/Y?
4. To detect mouse movement stop, on every mousemove, do a setTimeout for say X milliseconds in future and clear all the past timeouts using clearTimeout.
5. Use opacity and transition to achieve the fade-out effect when mouse movement stops.

Since jQuery is not necessarily required, following is a solution that does not use jQuery (and can be tweaked to work with jQuery).

const cursor = document.querySelector(".cursor");
let mouseMovementStoppedTimer;
const mouseMovementStopped = function() {
  cursor.style.opacity = 0;
}

window.addEventListener('mousemove', (function(e) {
  // Make the cursor visible immediately
  cursor.style.opacity = 1;

  // Change position of cursor only when mousemove is detected
  setTimeout(() => {
    // Change cursor position using translate, clientX & clientY
    cursor.style.transform =  `translate(${e.clientX}px, ${e.clientY}px)`;
  }, 100);

  clearTimeout(mouseMovementStoppedTimer);
  mouseMovementStoppedTimer = setTimeout(mouseMovementStopped, 200);
}));

.cursor {
  position: absolute;
  background-color: red;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.5s linear;
}

<div>
  <span>Move the mouse to see the cursor</span>
  <div  ></div>
</div>

CodePudding user response：

Code is commented. Does this require any more explanation?

let mouseX = 0;
let mouseY = 0;
let posX = 0;
let posY = 0;
let alpha = 1;

const circle = document.querySelector(".circle");

addEventListener("mousemove", ({ clientX, clientY }) => {
  mouseX = clientX;
  mouseY = clientY;
  // arbitrary high value so that it takes a moment until it actually fades out.
  alpha = 5;  
});

let prev = 0;
requestAnimationFrame(function render(now) {
  requestAnimationFrame(render);
  
  // expecting a 16ms frame interval, 
  // check how the current update interval compared to that
  const factor = (now - prev) / 16;
  prev = now;
  
  // how quickly to follow the cursor
  const speed = .125; 

  // adjusted for differences in update interval.
  posX  = factor * speed * (mouseX - posX);
  posY  = factor * speed * (mouseY - posY);
  // fade out
  alpha *= Math.pow(.95, factor);

  circle.style.transform = `translate(${posX}px, ${posY}px)`;
  
  let opacity = Math.min(1, alpha);

  // round the value to closest 1/255 step
  // opacity ain't more precise and that way we don't set 
  // "new values" that compute to the same opacity.
  circle.style.opacity = Math.round(opacity * 255) / 255;
});

.circle {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
}
.circle::before {
  content: "";
  display: block;
  width: 35px;
  height: 35px;
  border: 1.5px solid black;
  border-radius: 50%;
  background: #FFFFFFC0;
  transform: translate(-50%, -50%);
  animation: pulse 300ms ease-in-out alternate infinite
}

p {
  font-size: 1.5rem;
}

@keyframes pulse {
  from {
    transform: translate(-50%, -50%) scale(.8) ;
  }
  to {
    transform: translate(-50%, -50%) scale(1.5);
  }
}

<div ></div>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim quasi nobis eligendi ullam quisquam, quaerat assumenda distinctio laboriosam, voluptatum ipsum incidunt asperiores rerum. Consectetur ducimus veritatis numquam! Assumenda, molestiae quasi.</p>

<p>Eligendi ex eius quisquam cupiditate optio laboriosam maxime reiciendis quo itaque exercitationem. Distinctio eaque pariatur aliquid voluptate minus obcaecati facere quibusdam. Amet culpa id tempora nulla dolores, atque sit. Architecto!</p>

<p>Enim inventore delectus quidem qui eaque blanditiis quae quisquam impedit. Eveniet quibusdam veritatis soluta cupiditate dolor recusandae corrupti, dignissimos nam qui vero consequuntur nulla. Sequi possimus autem fugiat soluta aperiam.</p>

<p>Illo sed corrupti dolorum non nulla. Tempore recusandae fuga distinctio totam voluptas? Eos pariatur odio ipsa est facere minima sapiente omnis! Maxime nisi recusandae quis, exercitationem dolorem fuga dignissimos officia.</p>

<p>Nulla, nesciunt. Maxime beatae, dolor aliquam quasi animi mollitia nulla voluptatum, eius nisi dolores delectus ipsum tempora quas quos saepe magnam esse pariatur laudantium omnis at quaerat est consequuntur. Nulla.</p>

<p>Quasi deserunt maiores commodi ea dicta architecto, in alias odit cum doloremque hic! Consequatur molestias qui eius aspernatur dolore sapiente, doloremque optio, minima sunt, minus fugit in voluptate repudiandae numquam.</p>

<p>Amet ullam vero voluptates est expedita placeat nam repellat, hic cumque ratione sequi fuga consequatur, recusandae aliquid quaerat autem culpa quia officiis magni! Voluptatem pariatur ea, nulla culpa fugiat saepe?</p>

<p>Tempora voluptatibus itaque iste neque laudantium omnis doloremque ad est! Voluptas maxime accusantium porro corrupti, ad commodi? Ratione facere explicabo minima, dignissimos debitis harum minus similique earum veritatis? Cupiditate, reiciendis.</p>