728x90
반응형
마우스 새로 커서 만들어서 이펙트 주기
마우스를 따라다니는 커서를 만들어 보도록 합시다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01. 마우스 이펙트 - 마우스 따라다니기</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/mouse.css">
<style>
.mouse__wrap {
cursor: none;
}
.mouse__coursor {
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
;
}
.mouse__coursor.s1 {
background-color: rgba(35, 84, 139, 0.2);
border-color: #01346D;
}
.mouse__coursor.s2 {
background-color: rgba(59, 144, 184, 0.2);
border-color: #5195e2;
transform: scale(2) rotateY(720deg);
}
.mouse__coursor.s3 {
background-color: rgba(59, 144, 184, 0.2);
border-color: #4fc8dd;
transform: scale(1.5) rotateX(545deg);
}
.mouse__coursor.s4 {
background-color: rgba(59, 144, 184, 0.2);
border-color: #4fc8dd;
transform: scale(3) rotate(360deg);
border-radius: 10%;
}
.mouse__coursor.s5 {
background-color: rgba(100, 173, 207, 0.2);
border-color: #3475ee;
transform: scale(0.5)
}
.mouse__coursor.s6 {
background-color: rgba(59, 144, 184, 0.2);
border-color: #4fc8dd;
transform: scale(2) skew(720deg) rotateY(360deg);
}
.mouse__text {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.mouse__text p {
font-size: 2vw;
line-height: 1.9;
}
.mouse__text p span{
color: #01346D;
}
.mouse__text p:last-child {
font-size: 3vw;
}
.mouse__info {
position: absolute;
left: 0;
bottom: 0;
padding: 20px;
font-size: 16px;
line-height: 1.6;
}
</style>
</head>
<body class="img01 bg04 font01">
<header id="header">
<h1>Javascript Mouse Effect01</h1>
<p>마우스 이펙트 - 마우스 따라다니기</p>
<ul>
<li class="active"><a href="mouseeffect01.html">1</a></li>
<li><a href="mouseeffect02.html">2</a></li>
<li><a href="mouseeffect03.html">3</a></li>
<li><a href="mouseeffect04.html">4</a></li>
<li><a href="mouseeffect05.html">5</a></li>
<li><a href="mouseeffect06.html">6</a></li>
</ul>
</header>
<!-- header -->
<main id="main">
<div class="mouse__wrap">
<div class="mouse__coursor"></div>
<div class="mouse__text">
<p><span class="s1">Living</span> is a <span class="s2">fierce</span> <span class="s3">battle</span>.</p>
<p><span class="s4">산다</span>는것 <span class="s5">그것</span>은 <span class="s6">치열한 전투</span>이다.</p>
</div>
</div>
<div class="mouse__info">
<ul>
<li>clientX : <span class="clientX">0</span>px</li>
<li>clientY : <span class="clientY">0</span>px</li>
<li>offsetX : <span class="offsetX">0</span>px</li>
<li>offsetY : <span class="offsetY">0</span>px</li>
<li>pageX : <span class="pageX">0</span>px</li>
<li>pageY : <span class="pageY">0</span>px</li>
<li>screenX : <span class="screenX">0</span>px</li>
<li>screenY : <span class="screenY">0</span>px</li>
</ul>
</div>
</main>
<!-- main -->
<footer id="footer">
<a href="mailto:ghkddn132@naver.com">ghkddn132@naver.com</a>
</footer>
<!-- footer -->
<script>
window.addEventListener("mousemove", function(event){
document.querySelector(".clientX").innerHTML = event.clientX;
document.querySelector(".clientY").innerHTML = event.clientY;
document.querySelector(".offsetX").innerHTML = event.offsetX;
document.querySelector(".offsetY").innerHTML = event.offsetY;
document.querySelector(".pageX").innerHTML = event.pageX;
document.querySelector(".pageY").innerHTML = event.pageY;
document.querySelector(".screenX").innerHTML = event.screenX;
document.querySelector(".screenY").innerHTML = event.screenY;
});
const cursor = document.querySelector(".mouse__coursor");
window.addEventListener("mousemove",function(e){
cursor.style.left = e.clientX -25 + "px";
cursor.style.top = e.clientY -25 + "px";
});
// document.querySelector(".s1").addEventListener("mouseover", function(){
// cursor.classList.add("s1");
// });
// document.querySelector(".s1").addEventListener("mouseout", function(){
// cursor.classList.remove("s1");
// });
// document.querySelector(".s2").addEventListener("mouseover", function(){
// cursor.classList.add("s2");
// });
// document.querySelector(".s2").addEventListener("mouseout", function(){
// cursor.classList.remove("s2");
// });
// document.querySelector(".s3").addEventListener("mouseover", function(){
// cursor.classList.add("s3");
// });
// document.querySelector(".s3").addEventListener("mouseout", function(){
// cursor.classList.remove("s3");
// });
// document.querySelector(".s4").addEventListener("mouseover", function(){
// cursor.classList.add("s4");
// });
// document.querySelector(".s4").addEventListener("mouseout", function(){
// cursor.classList.remove("s4");
// });
// document.querySelector(".s5").addEventListener("mouseover", function(){
// cursor.classList.add("s5");
// });
// document.querySelector(".s5").addEventListener("mouseout", function(){
// cursor.classList.remove("s5");
// });
// document.querySelector(".s6").addEventListener("mouseover", function(){
// cursor.classList.add("s6");
// });
// document.querySelector(".s6").addEventListener("mouseout", function(){
// cursor.classList.remove("s6");
// });
// for문
// for(let i=1; i<=6; i++){
// document.querySelector(".s"+i).addEventListener("mouseover", function(){
// cursor.classList.add("s"+i);
// });
// document.querySelector(".s"+i).addEventListener("mouseout", function(){
// cursor.classList.remove("s"+i);
// });
// }
//forEach()
// document.querySelectorAll(".mouse__text span").forEach(function(span, num) {
// span.addEventListener("mouseover", function(){
// cursor.classList.add("s"+(num+1));
// });
// span.addEventListener("mouseout", function(){
// cursor.classList.remove("s"+(num+1));
// });
// });
//getAttribute();
document.querySelectorAll(".mouse__text span").forEach(function(span){
let attr = span.getAttribute("class");
//attr = s1 s2 s3 s4 s5 s6
span.addEventListener("mouseover", function(){
cursor.classList.add(attr);
});
span.addEventListener("mouseout", function(){
cursor.classList.remove(attr);
});
});
//setAttribute();
</script>
</body>
</html>※마우스 커서 만들기
기존마우스 커서를 대신할 마우스 커서를 만들어주었습니다.
.mouse__coursor {
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
;
}※마우스 좌표 가져오기
우선 마우스의 좌표를 가져와야 마우스를 대신 할수 있기 때문에 좌표를 가져 오도록 합시다.
window.addEventListener("mousemove", function(event){
document.querySelector(".clientX").innerHTML = event.clientX;
document.querySelector(".clientY").innerHTML = event.clientY;
document.querySelector(".offsetX").innerHTML = event.offsetX;
document.querySelector(".offsetY").innerHTML = event.offsetY;
document.querySelector(".pageX").innerHTML = event.pageX;
document.querySelector(".pageY").innerHTML = event.pageY;
document.querySelector(".screenX").innerHTML = event.screenX;
document.querySelector(".screenY").innerHTML = event.screenY;
});
마우스의 좌표값을 보기위해 window.addEventListener를 통해 사이트 왼쪽아래에 보여주게 하였습니다.
그리고 실제로 마우스를 움직이게 되면 마우스의 좌표에 맞게 움직이는 것을 볼수 있습니다.
이좌표를 마우스 커서에 적용 해보도록 합니다.
const cursor = document.querySelector(".mouse__coursor");
window.addEventListener("mousemove",function(e){
cursor.style.left = e.clientX -25 + "px";
cursor.style.top = e.clientY -25 + "px";
});변수를 하나 만들어 마우스 커서를 대신할 새로운 커서를 저장하고 좌표값을 가져와 움직이게 하였습니다.
(-25를 넣어준 이유는 새로만든 마우스 커서를 원래있던 마우스 커서의 중앙에 오기 하기 위해서 입니다.)
특정 단어에 커서를 대면 애니메이션 효과가 일어나게 만들기
새로운 커서를 특정 단어에 대면 커서가 움직이게 만들어 보도록 하겠습니다.
<div class="mouse__text">
<p><span class="s1">Living</span> is a <span class="s2">fierce</span> <span class="s3">battle</span>.</p>
<p><span class="s4">산다</span>는것 <span class="s5">그것</span>은 <span class="s6">치열한 전투</span>이다.</p>
</div>우선 span을 이용해 효과를 넣고 싶은 단어에 class를 만들어 줍니다.
.mouse__coursor.s1 {
background-color: rgba(35, 84, 139, 0.2);
border-color: #01346D;
}
.mouse__coursor.s2 {
background-color: rgba(59, 144, 184, 0.2);
border-color: #5195e2;
transform: scale(2) rotateY(720deg);
}
.mouse__coursor.s3 {
background-color: rgba(59, 144, 184, 0.2);
border-color: #4fc8dd;
transform: scale(1.5) rotateX(545deg);
}
.mouse__coursor.s4 {
background-color: rgba(59, 144, 184, 0.2);
border-color: #4fc8dd;
transform: scale(3) rotate(360deg);
border-radius: 10%;
}
.mouse__coursor.s5 {
background-color: rgba(100, 173, 207, 0.2);
border-color: #3475ee;
transform: scale(0.5)
}
.mouse__coursor.s6 {
background-color: rgba(59, 144, 184, 0.2);
border-color: #4fc8dd;
transform: scale(2) skew(720deg) rotateY(360deg);
}그 후 각 class에 적용하고 싶은 커서의 색이나 배경을 정하고 커서의 모양을 변경 시키도록 합니다.
이제 적용을 시켜 보도록 하겠습니다.
※하나하나 적용하기
document.querySelector(".s1").addEventListener("mouseover", function(){
cursor.classList.add("s1");
});
document.querySelector(".s1").addEventListener("mouseout", function(){
cursor.classList.remove("s1");
});
document.querySelector(".s2").addEventListener("mouseover", function(){
cursor.classList.add("s2");
});
document.querySelector(".s2").addEventListener("mouseout", function(){
cursor.classList.remove("s2");
});
document.querySelector(".s3").addEventListener("mouseover", function(){
cursor.classList.add("s3");
});
document.querySelector(".s3").addEventListener("mouseout", function(){
cursor.classList.remove("s3");
});
document.querySelector(".s4").addEventListener("mouseover", function(){
cursor.classList.add("s4");
});
document.querySelector(".s4").addEventListener("mouseout", function(){
cursor.classList.remove("s4");
});
document.querySelector(".s5").addEventListener("mouseover", function(){
cursor.classList.add("s5");
});
document.querySelector(".s5").addEventListener("mouseout", function(){
cursor.classList.remove("s5");
});
document.querySelector(".s6").addEventListener("mouseover", function(){
cursor.classList.add("s6");
});
document.querySelector(".s6").addEventListener("mouseout", function(){
cursor.classList.remove("s6");
});커서의 적용을 하나하나 적용한 모습입니다. 너무 많아서 보기 불편합니다. 이것을 for문과 forEach()문을 이용해 간략하게 적용하도록 합니다.
※for문 적용하기
for문을 이용해 똑같은 동작을 반복하게 할수 있습니다.
for문
for(let i=1; i<=6; i++){
document.querySelector(".s"+i).addEventListener("mouseover", function(){
cursor.classList.add("s"+i);
});
document.querySelector(".s"+i).addEventListener("mouseout", function(){
cursor.classList.remove("s"+i);
});
}
※forEach() 이용하기
forEach()
document.querySelectorAll(".mouse__text span").forEach(function(span, num) {
span.addEventListener("mouseover", function(){
cursor.classList.add("s"+(num+1));
});
span.addEventListener("mouseout", function(){
cursor.classList.remove("s"+(num+1));
});
});
※getAttribute() 을 이용하기
document.querySelectorAll(".mouse__text span").forEach(function(span){
let attr = span.getAttribute("class");
//attr = s1 s2 s3 s4 s5 s6
span.addEventListener("mouseover", function(){
cursor.classList.add(attr);
});
span.addEventListener("mouseout", function(){
cursor.classList.remove(attr);
});
});이벤트 메서드
| mousemove | 마우스가 움직일 때 발생하는 이벤트입니다 |
| mouseout | 마우스 포인터가 요소를 벗어나면 발생하는 이벤트입니다 |
이벤트 속성
| clientX | 클라이언트의 X좌표를 나타냅니다. |
| clientY | 클라이언트의 Y좌표를 나타냅니다. |
| offsetX | 이벤트가 발생한 요소(element)의 상대적인 X좌표를 나타냅니다 |
| offsetY | 이벤트가 발생한 요소(element)의 상대적인 Y좌표를 나타냅니다 |
| pageX | 이벤트가 발생한 위치의 X좌표를 브라우저 창을 기준으로 절대적인 좌표 값을 나타냅니다 |
| pageY | 이벤트가 발생한 위치의 Y좌표를 브라우저 창을 기준으로 절대적인 좌표 값을 나타냅니다 |
| screenX | 이벤트가 발생한 위치의 X좌표를 모니터 화면을 기준으로 절대적인 좌표 값을 나타냅니다. |
| screenY | 이벤트가 발생한 위치의 Y좌표를 모니터 화면을 기준으로 절대적인 좌표 값을 나타냅니다. |
| getAttribute() | DOM 요소의 속성(attribute) 값을 반환하는 메소드입니다. 이 메소드는 요소의 지정된 속성 이름을 매개변수로 받아 해당 속성의 값을 문자열 형태로 반환합니다. |