Feat: cursor upon-target sur liens et boutons
- Détection de survol via mouseover sur a, button, [role="button"], [tabindex] - Classe upon-target appliquée au curseur et à son outline - cursor-outline scale(0.5) au survol d'un élément interactif Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
47e993be58
commit
ebd8ad5e7b
1 changed files with 33 additions and 6 deletions
|
|
@ -1,10 +1,11 @@
|
|||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
|
||||
let cursorX = 0
|
||||
let cursorY = 0
|
||||
let outlineX = 0
|
||||
let outlineY = 0
|
||||
let cursorX = $state(0)
|
||||
let cursorY = $state(0)
|
||||
let outlineX = $state(0)
|
||||
let outlineY = $state(0)
|
||||
let onTarget = $state(false)
|
||||
let rafId
|
||||
|
||||
onMount(() => {
|
||||
|
|
@ -13,6 +14,14 @@
|
|||
cursorY = e.clientY
|
||||
}
|
||||
|
||||
const handleMouseOver = (e) => {
|
||||
onTarget = !!e.target.closest('a, button, [role="button"], [tabindex]')
|
||||
}
|
||||
|
||||
const handleMouseOut = () => {
|
||||
onTarget = false
|
||||
}
|
||||
|
||||
const animate = () => {
|
||||
outlineX += (cursorX - outlineX) * 0.2
|
||||
outlineY += (cursorY - outlineY) * 0.2
|
||||
|
|
@ -20,17 +29,29 @@
|
|||
}
|
||||
|
||||
window.addEventListener('mousemove', handleMouseMove)
|
||||
window.addEventListener('mouseover', handleMouseOver)
|
||||
window.addEventListener('mouseout', handleMouseOut)
|
||||
animate()
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('mousemove', handleMouseMove)
|
||||
window.removeEventListener('mouseover', handleMouseOver)
|
||||
window.removeEventListener('mouseout', handleMouseOut)
|
||||
if (rafId) cancelAnimationFrame(rafId)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="cursor" style="transform: translate({cursorX}px, {cursorY}px)"></div>
|
||||
<div class="cursor-outline" style="transform: translate({outlineX}px, {outlineY}px)"></div>
|
||||
<div
|
||||
class="cursor"
|
||||
class:upon-target={onTarget}
|
||||
style="transform: translate({cursorX}px, {cursorY}px)"
|
||||
></div>
|
||||
<div
|
||||
class="cursor-outline"
|
||||
class:upon-target={onTarget}
|
||||
style="transform: translate({outlineX}px, {outlineY}px)"
|
||||
></div>
|
||||
|
||||
<style>
|
||||
.cursor,
|
||||
|
|
@ -40,6 +61,7 @@
|
|||
left: 0;
|
||||
pointer-events: none;
|
||||
z-index: var(--z-cursor);
|
||||
transition: transform 0.1s ease, scale 0.2s ease, opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
|
|
@ -57,6 +79,11 @@
|
|||
border-radius: 50%;
|
||||
transform-origin: center;
|
||||
margin: -16px 0 0 -16px;
|
||||
transition: scale 0.2s ease;
|
||||
}
|
||||
|
||||
.cursor-outline.upon-target {
|
||||
scale: 0.5;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue