We need people who can dream of things that never existed.
우리는 한 번도 존재하지 않았던 것을 꿈꿀 수 있는 사람들이 필요하다.
We need people who can dream of things that never existed.
우리는 한 번도 존재하지 않았던 것을 꿈꿀 수 있는 사람들이 필요하다.
마우스 이펙트 - 따라다니기 : 이미지 효과2
<html>
<section id="mouseType01">
<div class="cursor"></div>
<div class="cursor-follower"></div>
<div class="mouse__wrap">
<p>We need people who can dream of things that never existed.</p>
<p>우리는 한 번도 존재하지 않았던 것을 꿈꿀 수 있는 사람들이 필요하다.</p>
</div>
</section>
<div class="attr">
<ul>
<li>mousePageX : <span class="mousePageX">0</span>px</li>
<li>mousePageY : <span class="mousePageY">0</span>px</li>
<li>centerPageX : <span class="centerPageX">0</span>px</li>
<li>centerPageY : <span class="centerPageY">0</span>px</li>
<li>maxPageX : <span class="maxPageX">0</span>px</li>
<li>maxPageY : <span class="maxPageY">0</span>px</li>
</ul>
</div>
</html>
<style>
body::before {
background: rgba(0, 0, 0, 0.8);
}
.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;
transform: perspective(0) rotateX(0deg) rotateY(0deg);
transform-style: preserve-3d;
will-change: transform;
/* transition: all 1s; */
}
.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/imges14.jpg) center center no-repeat;
background-size: 100% 40px;
filter: blur(15px) grayscale(50%);
opacity: 0.9;
z-index: -1;
}
.mouse__img figcaption {
position: absolute;
left: 50%; top: 50%;
font-size: 1vw;
line-height: 1.6;
white-space: nowrap;
background: rgb(0,0,0,0.3);
padding: 1vw 2vw;
transform: translate3d(-50%, -50%, 200px);
}
.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;
}
</style>
<script>
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설정
let maxPageX = Math.max(-900, Math.min(900, centerPageX));
let maxPageY = Math.max(-540, Math.min(540, centerPageY));
//각도 설정
let anlexPageX = maxPageX * 0.12;
let anlexPageY = maxPageY * 0.12;
//부드러운 효과
let softPageX = 0, softPageY = 0;
softPageX += (anlexPageX - softPageX) * 0.4;
softPageY += (anlexPageY - softPageY) * 0.4;
//이미지 움직이기
//transform: rotateX(0deg) trtateY(0de);
const imgMove = document.querySelector(".mouse__img");
imgMove.style.transform = "perspective(600px) rotateX("+ softPageY+"deg) rotateY("+ -softPageX +"deg)";
//원 크기
let circleWidth = mousePageX-circle.width/2;
let circleHeight = mousePageY-circle.height/2;
//커서
gsap.to(".cursor", {duration: .3, left: circleWidth, 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);
</script>