Curseur gluant

2,788 0 Animations Andev.web Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

4 December 2024

Curseur de carte animé extensible

26 June 2024

Formulaire de connexion/inscription à double curseur

30 August 2024

Effet de parallaxe du curseur

HTML

CSS

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();

Comments 0

…