마우스 이펙트
이번 시간에는 마우스 이펙트 대해 알아보겠습니다.
마우스 이펙트 01
동그란 공이 마우스를 따라 다닙니다.
마우스 움직임에 따라 좌표값이 실시간으로 변하며, 특정 위치에 갔을때 여러가지 transform 효과를 줍니다.
01. HTML 코드
{
<main id="main">
<section id="mouseType">
<div class="mouse__cursor"></div>
<div class="mouse__wrap">
<p>I <span class="style1">determine</span> a <span class="style2">future</span> all by <span class="style3">myself.</span></p>
<p>내 <span class="style4">미래는</span> 전적으로 <span class="style5">나</span> 스스로 <span class="style6">만든다.</span></p>
</div>
</section>
<div class="mouse__info">
<ul>
<li>clientX : <span class="clientX">0px</span><span>px</span></li>
<li>clientY : <span class="clientY">0px</span><span>px</span></li>
<li>offsetX : <span class="offsetX">0px</span><span>px</span></li>
<li>offsetY : <span class="offsetY">0px</span><span>px</span></li>
<li>pageX : <span class="pageX">0px</span><span>px</span></li>
<li>pageY : <span class="pageY">0px</span><span>px</span></li>
<li>screenX : <span class="screenX">0px</span><span>px</span></li>
<li>screenY : <span class="screenY">0px</span><span>px</span></li>
</ul>
</div>
</main>
}
02. CSS 코드
{
.mouse__wrap {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
overflow: hidden;
cursor: none;
}
.mouse__wrap p {
font-size: 2vw;
line-height: 2;
font-weight: 300;
}
.mouse__wrap p:last-child {
font-size: 3vw;
font-weight: 400;
}
.mouse__wrap p span {
border-bottom: 0.15vw dashed orange;
color: orange;
}
@media (max-width: 800px){
.mouse__wrap p {
padding: 0 20px;
font-size: 24px;
line-height: 1.5;
text-align: center;
margin-bottom: 10px;
}
.mouse__wrap p:last-child {
font-size: 40px;
line-height: 1.5;
text-align: center;
word-break: keep-all;
}
}
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
border-radius: 50%;
border: 3px solid #fff;
background-color: rgba(255,255,255,0.1);
user-select: none;
pointer-events: none;
transition:
background-color 0.3s,
border-color 0.3s,
transform 0.6s,
border-radius 0.3s;
}
.mouse__cursor.style1 {
background-color: rgb(238, 198, 156);
border-color: rgb(238, 198, 156);
}
.mouse__cursor.style2 {
background-color: rgb(182, 32, 237);
border-color: rgb(182, 32, 237);
transform: scale(2) rotateY(720deg);
}
.mouse__cursor.style3 {
background-color: rgb(102, 199, 12);
border-color: rgb(102, 199, 12);
transform: scale(1.5) rotateY(45deg);
}
.mouse__cursor.style4 {
background-color: rgb(95, 43, 229);
border-color: rgb(95, 43, 229);
transform: scale(10);
}
.mouse__cursor.style5 {
background-color: rgb(125, 41, 15);
border-color: rgb(125, 41, 15);
transform: scale(0.1);
}
.mouse__cursor.style6 {
background-color: rgb(222, 229, 22);
border-color: rgb(222, 229, 22);
border-radius: 0;
transform: scale(5);
}
.mouse__info {
position: absolute;
left: 20px;
bottom: 10px;
font-size: 14px;
line-height: 1.6;
color: #fff;
}
}
03. script 코드
mousemove 이벤트로 마우스 좌표를 구하고 커서를 따라다니게 합니다.
그 뒤에 반복문안에 mouseover,mouseout를 넣어서 강조 표시된 단어에 마우스를 댔을때
효과를 주고, 나올때 효과를 빼줍니다.
{
// 마우스 좌표
window.addEventListener("mousemove", (event) => {
document.querySelector(".clientX").innerText = event.clientX;
document.querySelector(".clientY").innerText = event.clientY;
document.querySelector(".offsetX").innerText = event.offsetX;
document.querySelector(".offsetY").innerText = event.offsetY;
document.querySelector(".pageX").innerText = event.pageX;
document.querySelector(".pageY").innerText = event.pageY;
document.querySelector(".screenX").innerText = event.screenX;
document.querySelector(".screenY").innerText = event.screenY;
});
// 따라다니게 하기
const cursor = document.querySelector(".mouse__cursor");
window.addEventListener("mousemove", (e) => {
cursor.style.left = e.clientX - 25 + "px";
cursor.style.top = e.clientY - 25 + "px";
});
// 노가다 방법
// document.querySelector(".style1").addEventListener("mouseover", () => {
// cursor.classList.add("style1");
// });
// document.querySelector(".style1").addEventListener("mouseout", () => {
// cursor.classList.remove("style1");
// });
// document.querySelector(".style2").addEventListener("mouseover", () => {
// cursor.classList.add("style2");
// });
// document.querySelector(".style2").addEventListener("mouseout", () => {
// cursor.classList.remove("style2");
// });
// document.querySelector(".style3").addEventListener("mouseover", () => {
// cursor.classList.add("style3");
// });
// document.querySelector(".style3").addEventListener("mouseout", () => {
// cursor.classList.remove("style3");
// });
// document.querySelector(".style4").addEventListener("mouseover", () => {
// cursor.classList.add("style4");
// });
// document.querySelector(".style4").addEventListener("mouseout", () => {
// cursor.classList.remove("style4");
// });
// document.querySelector(".style5").addEventListener("mouseover", () => {
// cursor.classList.add("style5");
// });
// document.querySelector(".style5").addEventListener("mouseout", () => {
// cursor.classList.remove("style5");
// });
// document.querySelector(".style6").addEventListener("mouseover", () => {
// cursor.classList.add("style6");
// });
// document.querySelector(".style6").addEventListener("mouseout", () => {
// cursor.classList.remove("style6");
// });
// for문
// for(let i=1; i<=6; i++){
// document.querySelector(".style"+i).addEventListener("mouseover", () => {
// cursor.classList.add("style"+i);
// });
// document.querySelector(".style"+i).addEventListener("mouseout", () => {
// cursor.classList.remove("style"+i);
// });
// }
// forEach문
// document.querySelectorAll(".mouse__wrap span").forEach((span, num) => {
// span.addEventListener("mouseover", () => {
// cursor.classList.add("style" + (num+1));
// });
// span.addEventListener("mouseout", () => {
// cursor.classList.remove("style" + (num+1));
// });
// });
// getAtrribute() 가장 추천하는 방법
document.querySelectorAll(".mouse__wrap span").forEach((span) => {
let attr = span.getAttribute("class");
span.addEventListener("mouseover", () => {
cursor.classList.add(attr);
});
span.addEventListener("mouseout", () => {
cursor.classList.remove(attr);
});
});
}
'Javascript응용_Effect' 카테고리의 다른 글
Parallax Effect 02 (1) | 2022.09.13 |
---|---|
Parallax Effect 01 (6) | 2022.09.06 |
Slider Effect 03 (4) | 2022.09.02 |
Slider Effect 02 (4) | 2022.08.29 |
Slider Effect 01 (3) | 2022.08.29 |
댓글