마우스 이펙트 효과를 오늘은 배웠어요 !
body를 먼저 볼게요 !
<body class="img01 bg01 font01">
<header id="header">
<h1>Javascript Mouse Effect01</h1>
<p>마우스 이펙트 - 마우스 따라다니기</p>
</header>
<!-- //header-->
<main id="main">
<div class="mouse__wrap">
<div class="mouse__cursor"></div>
<div class="mouse__text">
<p>You until have the <span class="s1">courage</span> You can never<span class="s2">cross the ocean</span> , <span class="s3"> to lose sight</span> of the shore.</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:getgrovy@gmail.com">getgrovy@gmail.com</a>
</footer>
<!-- //footer-->
</body>ul 테그 안에 있는 것들 처음보네요 정리해 볼게요 !
| 기능 | 공통사항 | |
| ClientX | 브라우저 페이지에서의 X좌표 위치를 반환하나 스크롤은 무시하고 해당 페이지의 상단을 0으로 측정 | 클라이언트 영역 내의 가로,세로 좌표를 제공합니다. 여기서 클라이언트 영역은 현재 보이는 브라우저 화면이 기준이 됩니다. |
| ClientY | 브라우저 페이지에서의 Y좌표 위치를 반환하나 스크롤은 무시하고 해당 페이지의 상단을 0으로 측정 | |
| offsetX | 이벤트 대상 객체에서의 상대적 마우스 x좌표 위치를 반환합니다. | 위 메서드는 이벤트 대상이 기준이 됩니다. ( 화면 중간에 있는 박스 내부에서 클릭한 위치를 찾을 때 해당 박스의 왼쪽 모서리 좌표가 0이됩니다. 화면의 기준이 아닙니다) |
| offsetY | 이벤트 대상 객체에서의 상대적 마우스 y좌표 위치를 반환합니다. | |
| pageX | 브라우저 페이지에서의 x좌표 위치를 반환합니다. | 위 메서드는 전체 문서를 기준으로 x,y 좌표를 반환 합니다. 스크롤 화면을 포함해서 측정합니다. |
| pageY | 브라우저 페이지에서의 Y좌표 위치를 반환합니다. | |
| screenX | 전체 모니터 스크린에서의 x좌표 위치를 반환합니다. | 모니터 화면을 기준으로 좌표를 제공합니다. 여기서 중요한 점은 브라우저 화면이 아니라 자신의 모니터 화면 전체를 기준으로 좌표를 측정한다는 점입니다. |
| screenY | 전체 모니터 스크린에서의 y좌표 위치를 반환합니다. |
해당 기능은 mouse이펙트를 사용할때 x y 좌표값을 나타내 주는데 쓰입니다 ! 아래 스크립트와 이어져요 !
<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";
});
마우스가 움직일때마다 ( window.addEventListener("mousemove", function(event){~~) 이벤트가 발생하며
값을 넣어줘요 아래 사진처럼요 !
<script> 1.노다가 2. for문 3.forEach 4.getAttribute !
//1. 노다가
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");
});
//2. for문
for(let i = 0 ; 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);
});
}
//3. forEach문
document.querySelectorAll(".mouse__text span").forEach((el , i)=>{
el.addEventListener("mouseover",function(){
cursor.classList.add("s"+(i+1));
})
el.addEventListener("mouseout",function(){
cursor.classList.remove("s"+(i+1));
})
});
//4. getAttribute();
document.querySelectorAll(".mouse__text span").forEach((span, num)=>{
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);
})
});forEach문 ! 으로 반복되는 구문을 풀어서 적어 볼게요
//3. forEach
document.querySelectorAll(".mouse__text span").forEach((el , i)=>{
// document.querySelectorAll(".mouse__text span")로 span목록을 뽑아와요!
// why? span 테그 위에서 이벤트를 발생시켜야하거든요 !
// forEach((el , i) 구문으로 반복시켜요 !
// el 은 document.querySelectorAll[0~5](".mouse__text span") 까지 반복해서 받는거에요
el.addEventListener("mouseover",function(){
cursor.classList.add("s"+(i+1));
// el.addEventListener("mouseover",function() 구문을 통해 마우스 오버 마우스가 위에 올라와있을때 실행하고
})
el.addEventListener("mouseout",function(){
cursor.classList.remove("s"+(i+1));
// el.addEventListener("mouseout",function() 구문을 통해 마우스 오버 마우스가 위에서 벗어났을때 실행해요
})
});
//4. getAttribute();
document.querySelectorAll(".mouse__text span").forEach((span, num)=>{
// document.querySelectorAll(".mouse__text span")로 span목록을 뽑아와요!
let attr = span.getAttribute("class");
// let attr = span.getAttribute("class"); 구문을통해서 span tag의 class명을 배열에 담아 가져와요
// attr = s1, s2, s3, s4, s5, s6
span.addEventListener("mouseover", function(){
cursor.classList.add(attr);
// span.addEventListener("mouseover", function() 구문을 통해 마우스 오버 마우스가 위에 올라와있을때 실행하고
})
span.addEventListener("mouseout", function(){
cursor.classList.remove(attr);
// span.addEventListener("mouseout",function() 구문을 통해 마우스 오버 마우스가 위에서 벗어났을때 실행해요
})
});
오늘은 여기까지 !
수고하셨습니다 n_n