If my children are precious, then the children of others are also precious.
내 자식 귀하면 남의 자식도 귀하다
If my children are precious, then the children of others are also precious.
내 자식 귀하면 남의 자식도 귀하다
마우스 이팩트 - 이미지 효과
<div class="mouse__wrap">
<div class="mouse__img">
<figure>
<img src="img/effectimg02.jpg" alt="이미지">
</figure>
<figcaption>
<p>If my children are precious, then the children of others are also precious.</p>
<p>내 자식 귀하면 남의 자식도 귀하다</p>
</figcaption>
</div>
</div>
.mouse__wrap {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
width: 100%;
height: 100vh;
overflow: hidden;
}
.mouse__img {
position: relative;
cursor: none;
}
.mouse__img figure {
position: relative;
width: 50vw;
height: 53vh;
overflow: hidden;
/* background-color: #ccc; */
/* border: 3px solid #fff; */
transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.84);
}
.mouse__img figure:hover {
transform: scale(1.025);
}
.mouse__img figure img {
position: absolute;
left: -5%;
top: -5%;
width: 110%;
height: 110%;
object-fit: cover;
/* opacity: 0.4; */
}
.mouse__img figcaption {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 1.3vw;
line-height: 1.6;
white-space: nowrap;
}
.cursor {
position: absolute;
left: -30px;
top: -30px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff;
z-index: 1000;
user-select: none;
pointer-events: none;
}
.cursor ul {
position: absolute;
left: 40px;
top: 0;
}
.cursor ul li {
white-space: nowrap;
}
const circle = document.querySelector(".cursor").getBoundingClientRect();
document.querySelector(".mouse__img").addEventListener("mousemove", (e) => {
gsap.to(".cursor", {
duration: .2,
left: e.pageX - circle.width / 2,
top: e.pageY - circle.height / 2
})
let mousePageX = e.pageX;
let mousePageY = e.pageY;
let centerPageX = window.innerWidth/2 - mousePageX;
let centerPageY = window.innerHeight/2 - mousePageY;
gsap.to(".mouse__img figure img", {duration: .3, x: centerPageX/20, y: centerPageY/20});
document.querySelector(".mousePageX").textContent = mousePageX;
document.querySelector(".mousePageY").textContent = mousePageY;
document.querySelector(".centerPageX").textContent = centerPageX;
document.querySelector(".centerPageY").textContent = centerPageY;