The dice is cast.
주사위는 던져졌다.
The dice is cast.
주사위는 던져졌다.
마우스 이펙트 - 이미지 효과
<main>
<section id="mouseType04">
<div class="cursor"></div>
<div class="mouse__wrap">
<div class="mouse__img">
<figure>
<img src="img/dice.jpg" alt="이미지">
</figure>
<figcaption>
<p>The dice is cast.</p>
<p>주사위는 던져졌다.</p>
</figcaption>
</div>
</div>
</section>
</main>body::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.8);
z-index: -1;
}
.mouse__wrap {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
width: 100%;
height: 100vh;
overflow: hidden;
}
.mouse__img {
position: relative;
}
.mouse__img figure {
position: relative;
width: 50vw;
height: 63vh;
overflow: hidden;
transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.84);
}
.mouse__img figure img {
position: absolute;
left: -5%;
top: -5%;
width: 110%;
height: 110%;
opacity: 0.7;
object-fit: cover;
cursor: none;
}
.mouse__img figcaption {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
text-align: center;
font-size: 2vw;
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 li {
white-space: nowrap;
}<script>
const circle = document.querySelector(".cursor").getBoundingClientRect();
document.querySelector(".mouse__img").addEventListener("mousemove", (e) => {
//커서(마우스를 따라다니는 원)
gsap.to(".cursor", {duration: 0.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.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;
})
</script>