74 lines
1.8 KiB
Plaintext
74 lines
1.8 KiB
Plaintext
<div class="cursor">
|
|
<div class="ball ball--small">
|
|
<svg height="10" width="10">
|
|
<circle cx="5" cy="5" r="4" stroke-width="0"></circle>
|
|
</svg>
|
|
</div>
|
|
<div class="ball ball--big">
|
|
<svg height="30" width="30">
|
|
<circle cx="15" cy="15" r="12" stroke-width="0"></circle>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
import { gsap } from "gsap";
|
|
|
|
const smallBall = document.querySelector(".cursor > .ball--small");
|
|
const bigBall = document.querySelector(".cursor >.ball--big");
|
|
const hoverables = document.querySelectorAll(".hoverable");
|
|
|
|
// Listeners
|
|
document.body.addEventListener("mousemove", onMouseMove);
|
|
for (let i = 0; i < hoverables.length; i++) {
|
|
hoverables[i].addEventListener("mouseenter", onMouseHover);
|
|
hoverables[i].addEventListener("mouseleave", onMouseHoverOut);
|
|
}
|
|
|
|
// Move the cursor
|
|
function onMouseMove(event: MouseEvent) {
|
|
gsap.to(bigBall, {
|
|
duration: 0.4,
|
|
y: event.clientY - 15,
|
|
x: event.clientX - 15,
|
|
});
|
|
gsap.to(smallBall, {
|
|
duration: 0.1,
|
|
x: event.clientX - 5,
|
|
y: event.clientY - 7,
|
|
});
|
|
}
|
|
|
|
// Hover an element
|
|
function onMouseHover() {
|
|
gsap.to(bigBall, {
|
|
duration: 0.3,
|
|
scale: 5,
|
|
});
|
|
}
|
|
function onMouseHoverOut() {
|
|
gsap.to(bigBall, {
|
|
duration: 0.3,
|
|
scale: 1,
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.cursor {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ball {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
mix-blend-mode: difference;
|
|
/* z-index: -1; */
|
|
|
|
& circle {
|
|
fill: var(--clr-ts-warm-red);
|
|
}
|
|
}
|
|
</style>
|