Cursor pegajoso

1615 Andev.web

Abrir en el editor Publica tu código

Recomendado

6 November 2024

Gradiente del cursor del ratón

28 October 2025

Ejemplo de efectos al pasar el cursor sobre un botón HTML

23 March 2025

Resplandor al pasar el cursor sobre el botón

HTML

CSS

JS

console.clear();

const TAIL_LENGTH = 20;

const cursor = document.getElementById('cursor');

let mouseX = 0;
let mouseY = 0;

let cursorCircles;
let cursorHistory = Array(TAIL_LENGTH).fill({x: 0, y: 0});

function onMouseMove(event) {
  mouseX = event.clientX;
  mouseY = event.clientY;
}

function initCursor() {
  for (let i = 0; i < TAIL_LENGTH; i++) {
    let div = document.createElement('div');
    div.classList.add('cursor-circle') ;
    cursor.append(div);
  }
  cursorCircles = Array.from(document.querySelectorAll('.cursor-circle'));
}

document.addEventListener('mousemove', onMouseMove, false);

initCursor();
updateCursor();

Recomendado

Gradiente del cursor del ratón

Ejemplo de efectos al pasar el cursor sobre un botón HTML

Resplandor al pasar el cursor sobre el botón

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS