WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Curseur gluant
1192
Andev.web
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
12 December 2024
Curseur d'images pour Blogspot CSS3
9 September 2024
Curseur / swiper.js
22 May 2025
Curseurs 3D à trois chiffres
HTML
Copy
Andev Web
Fluid
Motion
CSS
Copy
:root { --cursor-size: 28px; --bg: #FAF7EE; } .page-wrap { background: var(--bg); min-height: 100vh; } #cursor { position: fixed; top: calc(var(--cursor-size) * -0.5); left: calc(var(--cursor-size) * -0.5); pointer-events: none; mix-blend-mode: difference; filter: url(#goo); } .cursor-circle { position: absolute; top: 0; left: 0; width: var(--cursor-size); height: var(--cursor-size); border-radius: var(--cursor-size); background: var(--bg); transform-origin: center center; } body { overflow: hidden; } h1 { margin: 0; padding: 50px; text-align: center; font-size: 48px; line-height: 1; font-family: sans-serif; text-transform: uppercase; user-select: none; } .goo { display: none; }
JS
Copy
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')); } function updateCursor() { cursorHistory.shift(); cursorHistory.push({ x: mouseX, y: mouseY }); for (let i = 0; i < TAIL_LENGTH; i++) { let current = cursorHistory[i]; let next = cursorHistory[i + 1] || cursorHistory[TAIL_LENGTH - 1]; let xDiff = next.x - current.x; let yDiff = next.y - current.y; current.x += xDiff * 0.35; current.y += yDiff * 0.35; cursorCircles[i].style.transform = `translate(${current.x}px, ${current.y}px) scale(${i/TAIL_LENGTH})`; } requestAnimationFrame(updateCursor) } document.addEventListener('mousemove', onMouseMove, false); initCursor(); updateCursor();