728x90
Mouse Effect
다음 이미지처럼 마우스의 위치정보 불러오기, 선택자별 마우스효과를 만들어 보겠습니다.
코드블럭
<!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>마우스이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/mouse.css">
<style>
.mouse__wrap{
cursor: none;
}
.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,
border 0.3s
;
}
.mouse__cursor.s1{
background-color: rgba(203, 134, 160, 0.4);
border-color: #ce7082;
transform: rotate(360deg);
border: 5px dotted #f6d2f1;
}
.mouse__cursor.s2{
background-color: rgba(114, 207, 219, 0.4);
border-color: #ce7082;
transform: scale(2) rotateY(720deg);
}
.mouse__cursor.s3{
background-color: rgba(177, 219, 166, 0.4);
border-color: #ce7082;
transform: scale(1.5) rotateX(545deg);
}
.mouse__cursor.s4{
background-color: rgba(177, 219, 166, 0.4);
border-color: #ce7082;
transform: scale(10);
border-radius: 0;
}
.mouse__cursor.s5{
background-color: rgba(119, 128, 188, 0.4);
border-color: #ce7082;
transform: scale(3) skew(150deg);
/* border-width: 0; */
/* border-radius: 10px; */
}
.mouse__cursor.s6{
background-color: rgba(177, 219, 166, 0.4);
border-color: #ce7082;
transform: scale(0.1);
}
.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: 2;
}
.mouse__text p span {
color: #ce7082;
border-bottom: 1px dashed #ce7082;
}
.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 bg01 font02">
<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__cursor"></div>
<div class="mouse__text">
<p><span class="s1">Failure</span>is simply the <span class="s2">opportunity</span> to <span class="s3">begin</span>again, this time more intelligently.</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:lee3ll@naver.com">lee3ll@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__cursor");
window.addEventListener("mousemove", function(e){
cursor.style.left = e.clientX -25 + "px";
cursor.style.top = e.clientY -25 + "px";
});
//getttribute(); //속성값을 불러오기
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);
});
});
</script>
</body>
</html>보충설명
| clientX, clientY | 브라우저에서 사용자에게 웹페이지가 보여지는 영역을 기준으로 좌표를 표시합니다. 따라서, 스크롤바가 움직이더라도, 특정 지점의 clientX, clientY의 값은 동일합니다. |
| offsetX, offsetY | 표를 출력하도록 하는 이벤트가 걸려있는 DOM node를 기준으로 좌표를 표시합니다. 만약 특정 div 영역에서 offsetX, offsetY를 출력한다면, div의 왼쪽 상단 모서리 부분의 offsetX, offsetY의 값은 (0, 0)일 것입니다. |
| pageX, pageY | 전체 문서를 기준으로 한 좌표를 표시합니다. 위 그림과 같이, 만약 문서를 표현할 때 스크롤이 생긴다면, 특정 지점의 pageY 좌표값은 페이지가 스크롤 될때마다 변경 될 것입니다. |
| screenX, screenY | 사용자 모니터 화면을 기준으로 한 좌표를 표시합니다. 사용자 모니터의 왼쪽 상단 모서리가 (0, 0)이 됩니다. |
✨".clientX"에 선택자를 주어 mousemove/ event.clientX 이벤트를 넣어 clientX좌표값을 불러줍니다.
✨마우스오버 효과를 주기 위해 <p>태그에서 단어별 <span>태그를 줍니다. <span>에는 각각 class이름을 s1~s6으로 만들어줍니다.
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);
});
});✨querySelectorAll 태그와 forEach문으로 span태그를 전부를 선택하여 mouseover와 mouseout이라는 마우스 이벤트효과를 더해줍니다.