Thank you for being you.
너여서 고마워.
Thank you for being you.
너여서 고마워.
마우스 이펙트 - 이미지 효과
<main>
<section id="mouseType04">
<div class="cursor">
<!-- <ul>
<li>pageX : <span class="pageX">0</span>px</li>
<li>pageY : <span class="pageY">0</span>px</li>
</ul> -->
</div>
<div class="mouse__wrap">
<div class="mouse__img">
<figure>
<img src="img/img16.jpg" alt="이미지">
</figure>
<figcaption>
<p>Thank you for being you.</p>
<p>너여서 고마워.</p>
</figcaption>
</div>
</div>
</section>
</main>body::before {
background: rgba(0, 0, 0, 0.6);
}
.mouse__wrap {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
width: 100%;
height: 100vh;
overflow: hidden;
}
.mouse__img {
padding: relative;
cursor: none;
}
.mouse__img figure {
position: relative;
width: 53vw;
height: 50vh;
/* overflow: hidden;
background-color: #ccc;*/
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%;
/* opacity: 0.7; */
background-size: cover;
object-fit: cover;
}
.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(); //bottom height left right top width x y
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;
//마우스 좌표 값을 가운데 초기화
//전체 가로
//window.innerWidth 1920 //브라우저 크기
//window.outerWidth 1920 //브라우저 크기
//window.screen.Width 1920 //화면크기
//window.screen.height 1080 //
//마우스 좌표 값 기준점 을 가운데로 초기화
//전체 길이/2 - 마우스 X좌표값 == 0 이됨, 커서가 가운데로 오게됨
let centerPageX = window.innerWidth/2 -mousePageX; //가로값 가운데로
let centerPageY = window.innerHeight/2 -mousePageY; //세로값 가운데로
//이미지 움직이기
// const imgMove = document.querySelector(".mouse__img figure img");
// imgMove.style.transform = "translate("+ centerPageX/20 +"px, "+ centerPageY/20 +"px)";
//gsap 으로 이미지 움직이기
gsap.to(".mouse__img figure img", {duration: 0.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;
});