728x90
🖱 마우스 이펙트 : 기울기 효과 / 글씨 반전 효과
📌 이번 마우스 이펙트는 마우스 커서에 따라 이미지가 3d효과로 움직이며 마우스 커서를 사진에 마우스를 가져갔을 때 반전효과가 나타나는 이펙트입니다.
마우스 이펙트 완성본⭐️
➰ HTML
∙ figure와 figcaption을 mouse__img로 묶어줍니다.
∙ mouse__info를 통해 X좌표와 Y좌표의 값을 보여줍니다.
<main id="main">
<section id="mouseType">
<div class="mouse__cursor"></div>
<div class="mouse__wrap">
<div class="mouse__img">
<figure>
<img src="../assets/img/effect_bg03.jpg" alt="이미지">
</figure>
<figcaption>
<p>Experience is the best teacher.</p>
<p>경험은 최고의 스승이다.</p>
</figcaption>
</div>
</div>
</section>
<div class="mouse__info">
<ul>
<li>mousePageX : <span class="mousePageX">0px</span><span>px</span></li>
<li>mousePageY : <span class="mousePageY">0px</span><span>px</span></li>
<li>centerPageX : <span class="centerPageX">0px</span><span>px</span></li>
<li>centerPageY : <span class="centerPageY">0px</span><span>px</span></li>
<li>maxPageX : <span class="maxPageX">0px</span><span>px</span></li>
<li>maxPageY : <span class="maxPageY">0px</span><span>px</span></li>
<li>anglePageX : <span class="anglePageX">0px</span><span>px</span></li>
<li>anglePageY : <span class="anglePageY">0px</span><span>px</span></li>
</ul>
</div>
</main>
➰ CSS
마우스 반전 효과 :
mix-blend-mode: difference;
/* mouseType */
.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 {
transform: perspective(600px) rotateX(0deg) rotateY(0deg);
transform-style: preserve-3d;
will-change: transform;
transition: all 0.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(../assets/img/effect_bg03.jpg) center no-repeat;
background-size: 100% 40px;
filter: blur(15px) grayscale(50%);
z-index: -1;
opacity: 0.6;
}
.mouse__img figcaption {
position: absolute;
left: 50%;
top: 50%;
font-size: 1vw;
line-height: 1.6;
transform: translate3d(-50%, -50%, 100px);
padding: 1vw;
white-space: nowrap;
text-align: center;
background: rgba(0,0,0,0.4);
}
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
border-radius: 50%;
background: #fff;
z-index: 1000;
pointer-events: none;
user-select: none;
/* 반전 효과 */
mix-blend-mode: difference;
}
.mouse__info {
position: absolute;
left: 20px;
bottom: 10px;
font-size: 14px;
line-height: 1.6;
color: #fff;
}
➰ JS
주석을 참고해주세요!
//=document.addEventListener("mousemove", mouseMove);
const mouseMove = (e) => {
//마우스 좌표값
let mousePageX = e.pageX;
let mousePageY = e.pageY;
//마우스 좌표 기준점을 가운데로 변경
let centerPageX = window.innerWidth/2 - mousePageX;
let centerPageY = window.innerHeight/2 - mousePageY;
//최소값은 -100 최대값은 100
//Math.ma최대값 / Math.min최소값
let maxPageX = Math.max(-100, Math.min(100,centerPageX));
let maxPageY = Math.max(-100, Math.min(100,centerPageY));
//각도 줄이는 설정
let anglePageX = maxPageX * 0.3;
let anglePageY = maxPageY * 0.3;
//부드럽게 설정
let softPageX = 0 , softPageY = 0;
softPageX += (anglePageX - softPageX) * 0.4;
softPageY += (anglePageY - softPageY) * 0.4; //오차범위
//이미지 움직이기
const imgMove = document.querySelector(".mouse__img");
//anglePage값을 넣어도 가능하지만 softPage를 넣어주었을 때 아주 조금 더 부드러운 효과!
imgMove.style.transform = "perspective(600px) rotateX("+ -softPageY +"deg) rotateY("+ -softPageX +"deg)"
//커서
gsap.to(".mouse__cursor" , {duration : 0.3 , left: mousePageX -50 , top : mousePageY -50 })
//출력
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.querySelector(".anglePageX").textContent = Math.round(anglePageX) ;
document.querySelector(".anglePageY").textContent = Math.round(anglePageY);
};
window.addEventListener("mousemove", mouseMove);
'Effect(자바스크립트 활용) > Mouse Effect 마우스이펙트' 카테고리의 다른 글
| "마우스이펙트 06" : 텍스트 효과 (3) | 2022.09.29 |
|---|---|
| "마우스이펙트 04" : 이미지 효과 🏞 (3) | 2022.09.22 |
| "마우스이펙트 03" : 조명 효과 💡 (2) | 2022.09.22 |
| "마우스이펙트 02" : 커서 두 개를 통해 다양한 효과 내기 (4) | 2022.09.19 |
| "마우스이펙트 01" : 커서에 다양한 효과 넣기 (1) | 2022.09.06 |
댓글