Don't forget that this day will never come again - Dante
오늘이라는 날은 두 번 다시 오지 않는다는 것을 잊지 말라 - 단테
Don't forget that this day will never come again - Dante
오늘이라는 날은 두 번 다시 오지 않는다는 것을 잊지 말라 - 단테
마우스 이팩트 - 이미지 효과2
.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;
text-align: center;
perspective: 600px; /*z값 : 카메라 설정( 내가 보는 시점)*/
transform: rotateX(0deg) rotateY(0deg);
transform-style: preserve-3d;
will-change: transform;
}
.mouse__img figure {
width: 50vw;
position: relative;
}
.mouse__img figure::before {
content: '';
position: absolute;
left: 5%;
bottom: -30px;
width: 90%;
height: 40px;
background: url(img/effectimg08.jpg) center center no-repeat;
background-size: 100% 40px;
filter: blur(15px) grayscale(50%);
opacity: 1;
z-index: -1;
}
.mouse__img figcaption {
position: absolute;
left: 50%;
top: 50%;
font-size: 1vw;
white-space: nowrap;
line-height: 1.6;
background: rgba(0, 0, 0, 0.4);
padding: 1vw 2vw;
transform: translate3d(-50%,-50%,150px);
}
.cursor {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: #fff;
border-radius: 50%;
z-index: 1000;
user-select: none;
pointer-events: none;
mix-blend-mode: difference;
}
const circle = document.querySelector(".cursor").getBoundingClientRect();
function mouseMove(e){
// 마우스 좌표 값
let mousePageX = e.pageX;
let mousePageY = e.pageY;
// 마우스 좌표 기준점을 가운데로 변경
let centerPageX = window.innerWidth/2 - mousePageX;
let centerPageY = window.innerHeight/2 - mousePageY;
// 최소값은 -50 최대값은 50 설정
let maxPageX = Math.max(-800, Math.min(800, centerPageX));
let maxPageY = Math.max(-300, Math.min(300, centerPageY));
// 각도 줄이는 설정
let anLeXpageX = maxPageX * 0.12;
let anLeXpageY = maxPageY * 0.12;
// 부드럽게 설정
let softPageX = 0, softPageY = 0;
softPageX += (anLeXpageX - softPageX) * 0.7;
softPageY += (anLeXpageY - softPageY) * 0.7;
//이미지 움직이기
// transform: rotateX(0deg) rotateY(0deg);
const imgMove = document.querySelector(".mouse__img");
imgMove.style.transform = "rotateX("+softPageY+"deg) rotateY("+ -softPageX+"deg)";
// 원 크기
let circleWidht = mousePageX - circle.width/2;
let circleHeight = mousePageY - circle.height/2;
// 커서
gsap.to(".cursor", {duration: .3, left: circleWidht , top: circleHeight});
// 출력
document.querySelector(".mousePageX").textContent = mousePageX;
document.querySelector(".mousePageY").textContent = mousePageY;
document.querySelector(".centerPageX").textContent = centerPageX;
document.querySelector(".centerPageY").textContent = centerPageY;
document.querySelector(".maxPageX").textContent = maxPageX;
document.querySelector(".maxPageY").textContent = maxPageY;
}
document.addEventListener("mousemove", mouseMove)