WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
चिपचिपा कर्सर
1617
Andev.web
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
12 July 2025
स्क्रॉल-संचालित चिपचिपा शीर्षक
6 November 2024
माउस कर्सर ग्रेडिएंट
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script defer src="main.js"></script> <link rel="stylesheet" href="style.css"> <title>Andev Web</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" class="goo" version="1.1" width="100%"> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="blur"></feGaussianBlur> <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 35 -15" result="goo"></feColorMatrix> <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite> </filter> </defs> </svg> <div class="page-wrap"> <h1>Fluid<br>Motion</h1> </div> <div id="cursor"></div> </body> </html>
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();
