이전 게시물과 동일
<body>
<div class="container">
<ul>
<li>
<div class="text">yejun</div>
</li>
<li>
<div class="text">noah</div>
</li>
<li>
<div class="text">bamby</div>
</li>
<li>
<div class="text">eunho</div>
</li>
<li>
<div class="text">hamin</div>
</li>
</ul>
</div>
</body>style.css
img{
width: 100%;
vertical-align:bottom;
}
.container {
padding:100px;
}
.container ul{
width: 100%;
display: grid;
grid-template-columns: repeat(3,1fr);
gap:2px;
}
.container ul li{
width: 100%;
position: relative;
height: auto;
cursor: pointer;
border-radius: 10px;
}
.container ul li .text{
position: absolute;
background:#fff;
font-size: 1vw;
padding:5px 10px;
border-radius: 5px;
font-weight: 700;
color:#fff;
opacity: 0;
z-index: 1;
}script.js
const list = document.querySelectorAll('li');
list.forEach((item,index)=>{
const img = document.createElement('img');
img.src = `./images/0${index + 1}.png`;
item.appendChild(img);
const text = item.querySelector('.text');
const onMouseEnter = ({x,y}) =>{
const itemBounds = item.getBoundingClientRect();
gsap.set(text,{
x:Math.abs(x - itemBounds.left),
y:Math.abs(y - itemBounds.top),
scale:.5,
transformOrigin: "left top",
background: text.textContent.trim() === 'yejun' ? '#5daded' : text.textContent.trim() === 'noah' ? '#aa8ed6' : text.textContent.trim() === 'bamby' ? '#f0b1c4' : text.textContent.trim() === 'eunho' ? '#dd2e44' : text.textContent.trim() === 'hamin' ? '#000000' : ''
})
gsap.to(text, {
scale:1,
opacity:1,
})
};
const onMouseLeave = () =>{
gsap.to(text, {
opacity:0,
scale:.5,
})
};
const onMouseMove = ({x,y}) => {
const itemBounds = item.getBoundingClientRect();
gsap.to(text,{
duration: 1.25,
x:Math.abs(x - itemBounds.left),
y:Math.abs(y - itemBounds.top),
})
}
item.addEventListener('mouseenter',onMouseEnter);
item.addEventListener('mouseleave',onMouseLeave);
item.addEventListener('mousemove', onMouseMove);
})