Leeyanggoo
[JS] 마우스 이펙트 만들기!! 선택자 메서드 속성 활용하기!! 본문
자바스크립트에서는 마우스의 좌표에 따라 여러 가지 기능을 부여할 수 있습니다.
먼저 마우스 이펙트를 만들기 위해선 어떻게 마우스의 좌표값을 불러오는지 알아야 합니다.
이벤트 객체로 위치 정보를 불러오자!
| clientX | 브라우저 기준 X 좌표 값 |
| clientY | 브라우저 기준 Y 좌표 값 |
| offsetX | 요소 기준 X 좌표 값 |
| offsetY | 요소 기준 Y 좌표 값 |
| pageX | 페이지 기준 X 좌표 값 |
| pageY | 페이지 기준 Y 좌표 값 |
| screenX | 디바이스 기준 X 좌표 값 |
| screenY | 디바이스 기준 Y 좌표 값 |
이벤트 객체는 이벤트가 발생했을 때 생성되며, 이벤트와 관련된 정보를 담고 있습니다.
위의 8가지 속성은 이벤트 객체의 속성이자, 이벤트가 발생한 위치에 대한 정보를 담고 있습니다.
<main id="main">
<div class="mouse__wrap">
<div class="mouse__cursor"></div>
<div class="mouse__text">
<p><span class="s1">Laugh</span>, and the world laughs with you; <span class="s2">weep</span>, and you weep <span class="s3">alone</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>
변화하는 좌표값을 직접 보기 위해 "mouse__info" div안에 각각의 속성명을 class명으로 부여했습니다.
좌표값을 불러내면 <sapn> 태그 안에 속성의 좌표 기준 몇 픽셀(px)이 떨어져 있는지 나타나게 됩니다.
선택자 / 메서드 / 속성 활용으로 좌표 값 불러오기!
window.addEventListener("mousemove", function(event){ //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";
});
window : window 객체는 자바스크립트에서 전역 객체로 사용되며, 전역 변수와 함수를 포함합니다.
window 객체의 메소드는 전역 함수이며, window 객체의 프로퍼티는 전역 변수가 됩니다.
window 객체의 addEventListener 메소드는 이벤트 리스너를 등록하는 메소드입니다.
mouse와 관련된 여러 이벤트 목록
| mousedown | 마우스 버튼을 클릭했을 때 |
| mouseup | 마우스 버튼을 떼는 경우 |
| mousemove | 마우스를 움직이는 경우 |
| mouseenter | 요소 위에 포인터 요소 위치가 있을 때 |
| mouseleave | 요소 위에 포인터 요소 위치가 벗어났을 때 |
| mouseover | 요소 위에 포인터 요소 위치가 있을 때 |
| mouseout | 요소 위에 포인터 요소 위치가 벗어났을 때 |
위의 7가지 속성은 마우스와 관련된 여러 이벤트리스너의 목록입니다.
위의 예제 코드에서는 "mousemove"를 이용해 강조하고 싶은 문구를 커서가 지나가면 효과가 발생하도록 했습니다.
"window.addEventListener("mousemove", function(event){"
여기서 event는 이벤트리스너 함수의 매개변수로서 이벤트 객체를 받습니다.
이벤트 객체는 이벤트가 발생했을 때 생성되며, 이벤트와 관련된 정보를 담고 있습니다.
따라서 addEventListener의 매개변수 event에는 마우스의 정보가 담겨 있기 때문에,
"event.clientX"와 같이 사용하면 마우스의 브라우저 기준 X 좌표의 데이터를 가져오게 됩니다.
또한 "cursor.style.기준 위치"로 마우스 커서의 모양을 CSS를 활용해 디자인했습니다.
"e.clientX -25"에서 값을 빼는 이유는 도형이 마우스 밑에 나타나기 때문에 가운데를 맞추기 위함입니다.
for문, forEach문과 메서드"getAtrtibute()"를 이용해 코드를 단축하자!
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");
});
//이렇게 코드를 쓰게 되면 6번까지 너무 긴 코드를 작성해야 한다. ㅠㅠ
"mouse__text" 속의 강조하고 싶은 단어들을 <span class=s(n)>으로 감싸고 있습니다.(n=1부터 6까지)
따라서 각각의 단어에 접근하면 강조(mouseover, add), 떨어지면 사라지는(mouseout, remove) 효과를 주기 위해선 각각의 <span> 태그에 class를 추가해야 합니다.
하지만 위의 코드처럼 모든 span을 나열하게 되면 코드가 너무 길어지고 알아보기도 힘들게 됩니다.
//for문
for(let i=1; i<7; 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}`);
});
})
우리는 for문 혹은 forEach문을 사용해 코드를 줄여볼 수 있습니다.
for문의 경우 증가하는 i 값을 이용해 class명(s(n))을 부여하고 있습니다.
forEach문의 경우 forEach(요소, 인덱스)의 순서에 따라 불러오는 데이터 값을 예상하고 코드를 쓰게 됩니다.
여기서 "span(요소)"이 "document.querySelectorAll(".mouse__text span")"로 변환하는 점을 참고하면 더욱 코드를 축약해서 쓸 수 있습니다.
//getAtrtibute(); 속성 가져오기
document.querySelectorAll(".mouse__text span").forEach(function(span){
let attr = span.getAttribute("class"); // attr에 span의 class인 s1 ~ s6가 들어감
span.addEventListener("mouseover", function(){
cursor.classList.add(attr);
});
span.addEventListener("mouseout", function(){
cursor.classList.remove(attr);
});
});
더욱 효율적으로 코드를 작성하려면 우리가 부여하려는 요소의 속성 값을 가져오는 메소드인 "getAttribute()"를 이용하면 됩니다.
getAttribute(가져올 속성 이름)을 통해 class명을 가져오고 거기에 classList.add()를 이용해 class명을 부여하고 있습니다.
변수 "attr"은 span.getAttribute("class")로 <span> 태그의 class를 가지고 왔기 때문에 모든 span의 class가 들어갔습니다.
따라서 classList.add(attr)라고 하게 되면 모든 <span>의 class에 추가를 하게 됩니다.
😮💨 이번 예제 보러 가기
😮💨 다음 마우스 이펙트 보러 가기
