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>
|
<script>
|
||||||
import { onMount } from 'svelte'
|
import { onMount } from 'svelte'
|
||||||
|
|
||||||
let cursorX = 0
|
let cursorX = $state(0)
|
||||||
let cursorY = 0
|
let cursorY = $state(0)
|
||||||
let outlineX = 0
|
let outlineX = $state(0)
|
||||||
let outlineY = 0
|
let outlineY = $state(0)
|
||||||
|
let onTarget = $state(false)
|
||||||
let rafId
|
let rafId
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
|
|
@ -13,6 +14,14 @@
|
||||||
cursorY = e.clientY
|
cursorY = e.clientY
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleMouseOver = (e) => {
|
||||||
|
onTarget = !!e.target.closest('a, button, [role="button"], [tabindex]')
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleMouseOut = () => {
|
||||||
|
onTarget = false
|
||||||
|
}
|
||||||
|
|
||||||
const animate = () => {
|
const animate = () => {
|
||||||
outlineX += (cursorX - outlineX) * 0.2
|
outlineX += (cursorX - outlineX) * 0.2
|
||||||
outlineY += (cursorY - outlineY) * 0.2
|
outlineY += (cursorY - outlineY) * 0.2
|
||||||
|
|
@ -20,17 +29,29 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
window.addEventListener('mousemove', handleMouseMove)
|
window.addEventListener('mousemove', handleMouseMove)
|
||||||
|
window.addEventListener('mouseover', handleMouseOver)
|
||||||
|
window.addEventListener('mouseout', handleMouseOut)
|
||||||
animate()
|
animate()
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener('mousemove', handleMouseMove)
|
window.removeEventListener('mousemove', handleMouseMove)
|
||||||
|
window.removeEventListener('mouseover', handleMouseOver)
|
||||||
|
window.removeEventListener('mouseout', handleMouseOut)
|
||||||
if (rafId) cancelAnimationFrame(rafId)
|
if (rafId) cancelAnimationFrame(rafId)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="cursor" style="transform: translate({cursorX}px, {cursorY}px)"></div>
|
<div
|
||||||
<div class="cursor-outline" style="transform: translate({outlineX}px, {outlineY}px)"></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>
|
<style>
|
||||||
.cursor,
|
.cursor,
|
||||||
|
|
@ -40,6 +61,7 @@
|
||||||
left: 0;
|
left: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: var(--z-cursor);
|
z-index: var(--z-cursor);
|
||||||
|
transition: transform 0.1s ease, scale 0.2s ease, opacity 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cursor {
|
.cursor {
|
||||||
|
|
@ -57,6 +79,11 @@
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
transform-origin: center;
|
transform-origin: center;
|
||||||
margin: -16px 0 0 -16px;
|
margin: -16px 0 0 -16px;
|
||||||
|
transition: scale 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursor-outline.upon-target {
|
||||||
|
scale: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue