Life is either a great adventure or nothing
인생은 위대한 모험이거나 아니면 아무것도 아니다.
Life is either a great adventure or nothing
인생은 위대한 모험이거나 아니면 아무것도 아니다.
마우스 이펙트 - 이미지 효과2
<!--main-->
<main>
<section id="mouseType03">
<div class="cursor">
</div>
<div class="mouse__wrap">
<div class="mouse__img">
<figure>
<img src="img/image13.jpg" alt="이미지">
</figure>
<figcaption>
<p> Life is either a great adventure or nothing</p>
<p>인생은 위대한 모험이거나 아니면 아무것도 아니다.</p>
</figcaption>
</div>
</div>
</section>
</main>
<!--//main-->
body::before {
background: rgba(28, 29, 31, 0.794)
}
#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;
text-align: center;
/*perspective원근점 설정*/
transform: perspective(600px) rotateX(0deg) rotateY(0deg);
transform-style: preserve-3d;
will-change: transform;
/* transition: all 0.3s; */
}
.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/image13.jpg) center center no-repeat;
background-size: 100% 40px;
filter: blur(15px) grayscale(20%);
opacity: 0.9;
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 - e.pageX;
let centerPageY = window.innerHeight/2 - e.pageY;
//최대값 50 최소값 -50 구하기
//centerPage 좌표 값이 50이상으로 넘어가지 않도록 설정.
let maxPageX = Math.max(-800, Math.min(800, centerPageX));
let maxPageY = Math.max(-300, Math.min(300, centerPageY));
//각도 줄이는 설정
let anglePageX = maxPageX * 0.12;
let anglePageY = maxPageY * 0.12;
//부드럽게 움직이기
let softPageX = 0;
let softPageY = 0;
softPageX += (anglePageX -softPageX) *0.4;
softPageY += (anglePageY -softPageY) *0.4;
//이미지 움직이기
//transform: rotateX(0deg) rotateY(0deg);
const imgMove = document.querySelector(".mouse__img");
imgMove.style.transform = "rotateX("+softPageY+"deg) rotateY("+ -softPageX+"deg)"; //rotate 스타일 속성값을 centerPage 좌표값 변수로 지정해서 마우스 움직이면 위치가 움직이게.
//원 반지름 크기 가로세로
let circleWidth = mousePageX - circle.width/2;
let circleHeight = mousePageY - circle.height/2;
//커서
gsap.to(".cursor",{duration: .3, left:circleWidth, top: circleHeight}); //gsap로 마우스 움직이는 애니메이션 설정.
//좌표값 좌하단에 출력
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);