Life is from the inside out. When you shift on the inside, life shifts on the outside.
인생은 내면으로부터 나온다. 당신이 내면을 바꿀 때, 삶은 외부로 바뀐다.
Life is from the inside out. When you shift on the inside, life shifts on the outside.
인생은 내면으로부터 나온다. 당신이 내면을 바꿀 때, 삶은 외부로 바뀐다.
마우스 이펙트 - 이미지 효과
<!--main-->
<main>
<section id="mouseType03">
<div class="cursor">
</div>
<div class="mouse__wrap">
<div class="mouse__img">
<figure>
<img src="img/image10.jpg" alt="이미지">
</figure>
<figcaption>
<p>Life is from the inside out. When you shift on the inside, life shifts on the outside.</p>
<p>인생은 내면으로부터 나온다. 당신이 내면을 바꿀 때, 삶은 외부로 바뀐다.</p>
</figcaption>
</div>
</div>
</section>
</main>
<!--//main-->
body::before {
background: rgb(0 3 6 / 88%);
}
#mouseType01 {}
.mouse__wrap {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
width: 100%;
height: 100vh;
overflow: hidden;
/* cursor: none; */
}
.mouse__img {
position: relative;
cursor: none;
}
.mouse__img figure {
width: 50vw;
height: 53vh;
overflow: hidden;
transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.84);
position: relative;
/* background-color: #ccc; */
}
.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;
z-index: 1000;
border-radius: 50%;
background: #fff;
user-select: none;
pointer-events: none;
}
.cursor ul {
position: absolute;
left: 40px;
top: 0;
}
.cursor li {
white-space: nowrap;
}
const circle = document.querySelector(".cursor").getBoundingClientRect(); //커서의 길이 속성을 가져온다.
//가운데 이미지 내에서 움직이는 함수 설정
document.querySelector(".mouse__img").addEventListener("mousemove",(e)=>{
//커서 움직이는 애니메이션를 gsap로 설정
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.screenWidth : 화면 크기
//window.screenHeight : 화면 크기
//마우스 좌표값을 이미지 가운데로 초기화
//전체길이/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.to(".mouse__img figure img", {duration: 0.3, x: centerPageX/20, y: centerPageY/20}); //gsap로 애니메이션 설정.
//출력
document.querySelector(".mousepageX").textContent = mousepageX;
document.querySelector(".mousepageY").textContent = mousepageY;
document.querySelector(".centerPageX").textContent = centerPageX;
document.querySelector(".centerPageY").textContent = centerPageY;
});