마우스 이펙트
자바스크립트를 사용하여 마우스 이벤트를 처리하여 다양한 마우스 이펙트를 구현할 수 있습니다.
[ 커서를 문장에 가져가 대보세요! ]
VSCode
<body class="img01 bg02 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>
</ul>
</header>
<!-- //header-->
<main id="main">
<div class="mouse__wrap">
<div class="mouse__cursor"></div>
<div class="mouse__text">
<p><span class="s1">Only</span> I Can <span class="s2">Change</span> My <span class="s3">LIFE</span>. Noone Can <span class="s4">Do it</span> For <span class="s8">ME</span></p>
<p>나만이 내 <span class="s5">인생</span>을 바꿀 수 있다. <span class="s6">아무도</span> 날 <span class="s7">대신</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:ehcjswo1@gmail.com">ehcjswo1@gmail.com</a>
</footer>
<!-- //footer-->
header 에는 선택한 페이지를 쉽게 이동 할 수 있도록 버튼을 만들었습니다.
main 클래스에는 명언이 들어있고 중요한 단어,문장에 span태그를 줘서 효과를 넣을 수 있게 만들었습니다.
mouse_info 클래스는 마우스 좌표를 계속 입력받아 오는 코드입니다.
스크립트를 이용해 span에 입력값을 받아올 예정입니다.
<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";
});
//getAttribute();
document.querySelectorAll(".mouse__text span").forEach(function(span){
let attr = span.getAttribute("class");
span.addEventListener("mouseover", function(){
cursor.classList.add(attr)
});
span.addEventListener("mouseout", function(){
cursor.classList.remove(attr)
});
});
</script>
ClientX는 이벤트 객체(Event Object)의 속성 중 하나입니다. 이벤트 객체는 이벤트가 발생한 요소(element)와 관련된 정보를 제공합니다.
ClientX는 마우스 이벤트(mouse event)에서 사용되며, 이벤트가 발생한 위치의 X좌표를 반환합니다. 즉, 마우스 포인터가 브라우저 창에서 어느 위치에 있는지를 나타내는 값을 반환합니다.
이를 활용하면 마우스 이벤트가 발생한 위치를 파악하여 해당 위치에 대한 작업을 처리할 수 있습니다.
getAttribute( )은 HTML 요소의 속성 값을 가져오는 메소드입니다.
이 메소드는 DOM(Document Object Model) API의 일부이며, JavaScript를 사용하여 웹 페이지의 요소에 접근하고 조작할 수 있도록 해줍니다.
이 메소드를 이용하면 필요한 클래스, 속성들을 찾아 입력해 놓으면 편하게 반복문을 사용할 수 있습니다.
밑에 코드는 코드를 반복하여 출력하는 코드를 for( ) 문과 forEach( )문, getAttribute( ) 문을 사용하여 코드를 줄일 수 있는 예입니다.
반복문
//수작업
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");
});
document.querySelector(".s7").addEventListener("mouseover", function(){
cursor.classList.add("s7");
});
document.querySelector(".s7").addEventListener("mouseout", function(){
cursor.classList.remove("s7");
});
document.querySelector(".s8").addEventListener("mouseover", function(){
cursor.classList.add("s8");
});
document.querySelector(".s8").addEventListener("mouseout", function(){
cursor.classList.remove("s8");
});
//for문
for(let i=1; i<=8; 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,i){
span.addEventListener("mouseover",function(){
cursor.classList.add("s"+(i+1));
})
span.addEventListener("mouseout",function(){
cursor.classList.remove("s"+(i+1));
})
});
//getAttribute();
document.querySelectorAll(".mouse__text span").forEach(function(span){
let attr = span.getAttribute("class");
span.addEventListener("mouseover", function(){
cursor.classList.add(attr)
});
span.addEventListener("mouseout", function(){
cursor.classList.remove(attr)
});
});
처음엔 긴 코드를 for( )문을 이용해서 반복적으로 들어가는 .s1~8번 태그를 .s 만남기고 번호만 바뀔 수 있게 바꿨습니다.
순식간에 불필요한 코드를 줄인 모습을 볼 수 있습니다.
제가 생각하는 좋은 프로그래머는 남들이 봐도 한눈에 알기 쉬운 코드를 쓸 수 있는 사람 인거 같습니다.
forEach( )문의 코드는 querySelectorAll 메서드를 사용하여 mouse__text 클래스를 가진 요소의 자식 중 span 요소를 모두 선택합니다. 그런 다음 forEach 메서드를 사용하여 각 span 요소에 대해 mouseover 및 mouseout 이벤트에 대한 이벤트 리스너를 추가합니다.
이벤트 리스너가 커서를 따라 다니는 클래스인 cursor 클래스에 s1, s2, s3,...과 같은 클래스를 추가하고 제거하는 것 입니다. i+1은 인덱스가 0부터 시작하는 반면, 클래스 이름은 s1부터 시작하기 때문에 1을 더해주는 것입니다.
이렇게 수작업 할 필요없이 제어문을 사용하면 보기도 쉽고 코드를 대폭 줄일 수 있습니다.
다음글
(마우스 이펙트2)
https://ehcjswo.tistory.com/48
(마우스 이펙트3)
https://ehcjswo.tistory.com/49