¸¶¿ì½º¸¦ µû¶ó´Ù´Ï´Â ÅؽºÆ® ¾Ö´Ï¸ÞÀÌ¼Ç È¿°úÀÔ´Ï´Ù.
À¥ÆäÀÌÁö¸¦ Á» ´õ ¿ªµ¿ÀûÀÌ°í ¸Å·ÂÀûÀ¸·Î ¸¸µé ¼ö ÀÖ½À´Ï´Ù.
HTML ±¸Á¶
<div class="cursor">
<div class="text">move</div>
<div class="text">move</div>
<div class="text">move</div>
<div class="text">move</div>
<div class="text"><span>move</span></div>
</div>
CSS ¼Ò½º
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100vh;
background: #161616;
overflow: hidden;
}
.text {
position: absolute;
pointer-events: none;
font-family: venn-extended, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 6em;
-webkit-text-stroke: 1px #fff;
/*font-weight: 500;
text-transform: uppercase;*/
color: #161616;
}
.text span {
color: #fff;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
JS ¼Ò½º
document.addEventListener("mousemove", e => {
gsap.to(".text", {
x: e.clientX,
y: e.clientY,
stagger: { // wrap advanced options in an object
each: -0.02,
ease: "power2.inOut",
}
})
})
±¸ÇöµÈ ȸéÀº »çÀÌÆ®¿¡¼ È®ÀÎ °¡´ÉÇÕ´Ï´Ù.
|