When you get hit here and there and get ruined,
이리저리 치이고 또 망가질 때쯤
When you get hit here and there and get ruined,
이리저리 치이고 또 망가질 때쯤
마우스 이펙트 - 이미지 효과
<main>
<section id="mouseType04">
<div class="cursor"></div>
<div class="mouse__wrap">
<div class="mouse__img">
<figure>
<img src="img/img24.jpg" alt="이미지">
</figure>
<figcaption>
<p>When you get hit here and there and get ruined,</p>
<p>이리저리 치이고 또 망가질 때쯤</p>
</figcaption>
</div>
</div>
</section>
</main>
.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;
cursor: none;
}
.mouse__img figure {
position: relative;
width: 50vw;
height: 53vh;
overflow: hidden;
/* background-color: #ccc; */
border: 3px solid #fff;
transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.84);
}
.mouse__img figure:hover {
transform: scale(1.025);
}
.mouse__img figure img {
position: absolute;
left: -5%;
top: -5%;
width: 110%;
height: 110%;
/* opacity: 0.4; */
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.6vw;
line-height: 1.6;
white-space: nowrap;
background: rgba(0,0,0,0.6);
padding: 0.5vw 1vw;
}
.cursor {
position: absolute;
left: 0px;
top: 0px;
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 ul li {
white-space: nowrap;
}
const circle = document.querySelector(".cursor").getBoundingClientRect();
document.querySelector(".mouse__img").addEventListener("mousemove", e => {
document.querySelector(".cursor").style.opacity = "1";
//커서
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; 1707 //확대축소로 변함 //창 크기로 변환
// window.outerWidth; 1536 //창 크기로 변환
// window.screen.width 1536 //변화 없음
//마우스 좌표 값을 가운데 초기화
//전체 길이/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: .3, x: centerPageX/20, y: centerPageY/20});
//출력
// document.querySelector(".pageX").textContent = centerPageX;
// document.querySelector(".pageY").textContent = centerPageY;
document.querySelector(".mousePageX").textContent = mousePageX;
document.querySelector(".mousePageY").textContent = mousePageY;
document.querySelector(".centerPageX").textContent = centerPageX;
document.querySelector(".centerPageY").textContent = centerPageY;
})
document.querySelector(".mouse__img").addEventListener("mouseout", e => {
document.querySelector(".cursor").style.opacity = "0";
})