javascript – How to remove easing from custom cursor


  let cursor = document.querySelector('#custom-cursor');

  document.addEventListener('mousemove', evt => {
    document.body.classList.add('custom-cursor-moved')

    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
      $('#custom-cursor').remove();
    } else {
      cursor.style.display = 'block';
    }


    let {
      clientX: x,
      clientY: y
    } = evt;
    let scale = 1;

    if (evt.target.matches('a,span,[onclick],img,video,i')) {
      cursor.classList.add('active');
      scale = 0.5;
    } else {
      cursor.classList.remove('active');
    }

    cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;

  });
* {
  cursor: none;
}


.custom-cursor-moved,
.custom-cursor-moved * {
  cursor: none !important;
}


#custom-cursor {
  display: none;
  position: fixed;
  width: 20px;
  height: 20px;
  top: -10px;
  left: -10px;
  border: 2px solid black;
  border-radius: 50%;
  opacity: 1;
  background-color: #fb4d98;
  pointer-events: none;
  z-index: 99999999;
  transition: transform ease-out 0.15s, border 0.5s, opacity 0.5s, background-color 0.5s;
}

#custom-cursor.active {
  opacity: 0.5;
  background-color: #000;
  border: 2px solid #fb4d98;
}
<div id="custom-cursor"></div>



Source link

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here