마우스 이펙트 01
마우스 이펙트에 대한 사이트를 만들어 봤습니다.
사용자가 마우스를 움직이거나 특정한 위치로 이동 시키면 마우스가 반응하여 커서가 변화 합니다.
HTML 구조
<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>The <span class="s1">cure</span> for <span class="s2">anything</span> is <span class="s3">saltwater sweat, tears or the sea.</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:kshkmn0929@naver.com">kshkmn0929@naver.com</a>
</footer>
<!-- footer -->
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
;
}
.mouse__cursor.s1 {
background-color: rgba(255, 165, 0, 0.4);
border-color: orange;
}
.mouse__cursor.s2 {
background-color: rgba(140, 0, 255, 0.4);
border-color: rgb(140, 0, 255);
transform: scale(2) rotateY(720deg);
}
.mouse__cursor.s3 {
background-color: rgba(0, 47, 255, 0.4);
border-color: rgb(0, 47, 255);
transform: scale(2) rotateX(720deg);
}
.mouse__cursor.s4 {
background-color: rgba(0, 47, 255, 0.4);
border-color: rgb(0, 47, 255);
transform: scale(10);
border-radius: 0;
}
.mouse__cursor.s5 {
background-color: rgba(255, 81, 0, 0.4);
border-color: rgb(255, 81, 0);
transform: scale(5) skew(140deg) rotate(200deg);
}
.mouse__cursor.s6 {
background-color: rgba(0, 47, 255, 0.4);
border-color: rgb(0, 47, 255);
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: 1.9;
}
.mouse__text p:last-child {
font-size: 2.3vw;
}
.mouse__text p span {
color: #15A29C;
border-bottom: 1px dashed #15A29C;
}
.mouse__info {
position: absolute;
left: 0;
bottom: 0;
padding: 20px;
font-size: 16px;
line-height: 1.6;
}
</style>
javascript
<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";
});
// 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();
// 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");
// });
</script>
javascript 설명
자바스크립트 코드에 대한 설명입니다.
주석 표시로 되어있는 코드를 각각 for문 forEach문 getAttribute()를 이용하여 3가지의 방법으로 실행합니다.
forEach()
document.querySelectorAll(".mouse__text span"): 클래스 이름이 "mouse__text"인 요소들 중에서 <span> 태그를 모두 선택합니다.
forEach(function(span, num){}): 선택된 모든 <span> 태그 요소에 대해서 반복문을 실행합니다. 각 요소는 span 매개변수로 전달되고, 인덱스는 num 매개변수로 전달됩니다.
span.addEventListener("mouseover", function(){}): 각 <span> 요소에 대해서, 마우스가 요소 위로 올라갈 때(mouseover 이벤트) 발생하는 함수를 등록합니다.
cursor.classList.add("s"+(num+1));: 마우스 오버시, cursor 클래스를 가진 요소에 s1, s2, s3 등의 클래스를 추가합니다. 이때 num은 현재 <span> 요소의 인덱스이고, +1을 더한 이유는 클래스 이름이 s1부터 시작하기 때문입니다.
span.addEventListener("mouseout", function(){}): 각 <span> 요소에 대해서, 마우스가 요소를벗어날 때(mouseout 이벤트) 발생하는 함수를 등록합니다.
cursor.classList.remove("s"+(num+1));: 마우스 아웃시, cursor 클래스를 가진 요소에서 s1, s2, s3 등의 클래스를 제거합니다. 이때 num은 현재 <span> 요소의 인덱스이고, +1을 더한 이유는 클래스 이름이 s1부터 시작하기 때문입니다.
따라서, 위 코드는 클래스 이름이 "mouse__text"인 요소들 중에서 모든 <span> 태그 요소에 대해, 마우스 오버시에는 해당 요소의 인덱스에 따라 s1, s2, s3 등의 클래스를 cursor 클래스를 가진 요소에 추가하고, 마우스 아웃시에는 해당 클래스를 제거하는 이벤트 핸들러를 등록하는 코드입니다.
for()
for 루프를 사용하여 1부터 6까지의 값을 반복하고, 각 반복에서 document.querySelector() 함수를 사용하여 ".s"+i와 일치하는 클래스를 가진 요소를 찾습니다. 여기서 i는 루프의 반복 인덱스를 의미합니다.
그런 다음, 찾은 요소에 대해 mouseover 이벤트 및 mouseout 이벤트를 각각 추가합니다. 이벤트가 발생할 때마다, 마우스 커서 요소의 클래스 목록에 "s"+i를 추가하거나 제거합니다.
그리고 1부터 6까지의 값을 반복하여 실행합니다.
getAttribute()
javaScript의 getAttribute() 메소드는 HTML 문서에서 지정한 속성 값을 가져올 때 사용합니다. 이 메소드는 HTML 요소 객체의 메소드 중 하나이며, getAttribute() 메소드는 특정 HTML 요소의 속성 값을 가져올 때 사용됩니다.
getAttribute() 메소드는 매개 변수로 가져올 속성의 이름을 입력받습니다. 이 메소드는 입력된 속성의 값을 반환합니다. 만약 해당 속성이 없을 경우에는 null을 반환합니다.