한번씩 읽고 가세요.
“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
<!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>01. 마우스 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/mouse.css">
<style>
.mouse__wrap {
cursor: none;
}
.mouse__cursol {
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.6s,
border-color 0.6s,
transform 0.6s
;
}
.mouse__cursol.s1 {
background-color: rgba(red, green, blue, 0.8);
border-color: #1d8603;
}
.mouse__cursol.s2 {
background-color: rgba(red, green, blue, 0.8);
border-color: #00fa9a;
transform: scale(2) rotateY(720deg);
}
.mouse__cursol.s3 {
background-color: rgba(red, green, blue, 0.8);
border-color: #faf600;
transform: scale(1.5) rotateX(545deg);
}
.mouse__cursol.s4 {
background-color: rgba(red, green, blue, 0.8);
border-color: #f200ff;
transform: scale(7) rotateX(1080deg) rotateY(1080deg);
}
.mouse__cursol.s5 {
background-color: rgba(red, green, blue, 0.8);
border-color: #df0425;
transform: scale(5) skew(360deg) rotateX(1080deg) rotateY(1080deg);
border-radius: 0px;
}
.mouse__cursol.s6 {
background-color: rgba(red, green, blue, 0.8);
border-color: #0a37ff;
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: 3vw;
}
.mouse__text p span {
color: #faad00;
border-bottom: 1px solid #faad00;
}
.mouse__info {
position: absolute;
left: 0;
bottom: 0;
padding: 20px;
font-size: 16px;
line-height: 1.6;
}
</style>
</head>
<body class="img01 bg01 font06">
<header id="header">
<h1>Javasrcipt 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__cursol"></div>
<div class="mouse__text">
<p>I want a car that makes me want to <span class="s1">compete</span> rather than a <span class="s2">car</span> that makes me <span class="s3">win</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>offset : <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:esansi@naver.com">esansi@naver.com</a></footer>
</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;
});
// for(let i=0; i<=9; i++){
// document.querySelectorAll(".mouse__info ul li span").forEach(function(el, index){
// el.innerHTML = index+1+"00"
// });
// }
const cursor = document.querySelector(".mouse__cursol")
window.addEventListener("mousemove",function(e){
cursor.style.left = e.clientX - 25 + "px";
cursor.style.top = e.clientY -25 + "px";
});
// 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");
// });
// 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();
</script>
</body>
</html>transform 속성
scale(), rotate(), translate(), skew()
transform:scale() - X 또는 Y축으로 확대/ 축소
scale은 해당 요소를 지정한 크기만큼 확대 또는 축소 시킬 수 있습니다.
transform:rotate() - 지정 요소 회전
rotate는 요소를 지정한 각도만큼 회전시킵니다.
회전 각도가 플러스 값일 경우 시계 방향, 마이너스 값일 경우 반시계 방향으로 회전합니다.
transform:translate() - 지정 요소 X 또는 Y축으로 이동
translate는 요소를 지정한 위치로 X 또는 Y축만큼 이동 시킵니다.
transform:skew() - 지정 요소 X 또는 Y축으로 기울이기
skew는 요소를 지정한 만큼 X 또는 Y축으로 기울입니다.
transform-origin 속성
위의 transform 속성인 scale(), rotate(), translate(), skew()들을 한번씩 연습해 보았다면, 지정 요소의 중심을 기준으로 동작한다는 것을 알 수 있을 것 입니다.
하지만 transform-origin 을 사용하면 지정 요소의 기준점을 변경할 수 있습니다.
이벤트 속성
clientX, clientY
위 메서드는 클라이언트 영역 내의 가로,세로 좌표를 제공합니다. 여기서 클라이언트 영역은 현재 보이는 브라우저 화면이 기준이 됩니다.
clientX : 브라우저 페이지에서의 X좌표 위치를 반환하나 스크롤은 무시하고 해당 페이지의 상단을 0으로 측정합니다.
clientY : 브라우저 페이지에서의 Y좌표 위치를 반환하나 스크롤은 무시하고 해당 페이지의 상단을 0으로 측정합니다.
offsetX, offsetY
위 메서드는 이벤트 대상이 기준이 됩니다. ( 화면 중간에 있는 박스 내부에서 클릭한 위치를 찾을 때 해당 박스의 왼쪽 모서리 좌표가 0이됩니다. 화면의 기준이 아닙니다)
전체 문서를 기준으로 합니다(스크롤 화면 포함)
offsetX : 이벤트 대상 객체에서의 상대적 마우스 x좌표 위치를 반환합니다.
offsetY : 이벤트 대상 객체에서의 상대적 마우스 y좌표 위치를 반환합니다.
pageX, pageY
위 메서드는 전체 문서를 기준으로 x,y 좌표를 반환 합니다. 스크롤 화면을 포함해서 측정합니다.
pageX : 브라우저 페이지에서의 x좌표 위치를 반환합니다.
pageY : 브라우저 페이지에서의 Y좌표 위치를 반환합니다.
screenX, screenY
위 메서드는 모니터 화면을 기준으로 좌표를 제공합니다. 여기서 중요한 점은 브라우저 화면이 아니라 자신의 모니터 화면 전체를 기준으로 좌표를 측정한다는 점입니다.
screenX : 전체 모니터 스크린에서의 x좌표 위치를 반환합니다.
screenY :전체 모니터 스크린에서의 y좌표 위치를 반환합니다.
offset 메서드는 이벤트가 걸려 있는 DOM객체를 기준으로 좌표를 출력합니다. 이와 비슷한 메서드로 layer가 있습니다. 이 메서드는 현재 파이어폭스에서만 사용합니다.
screen 메서드는 화면 출력 크기(자신의 모니터)가 기준인 절대 좌표입니다. 브라우저를 움직여도 값은 같습니다.
client 메서드는 브라우저가 기준인 좌표입니다. 현재 보이는 브라우저 화면 상에서 어느 지점에 위치하는 지를 의미하기 때문에 스크롤 해도 값은 변하지 않습니다.
page 메서드는 문서가 기준입니다. client와 비슷하지만 이 메서드는 문서 전체 크기가 기준이라 스크롤 시 값이 바뀝니다. (스크롤을 포함해서 측정합니다)
마우스 좌표를 화면에 나타나게 하는 코드
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;
});마우스 따라다니는 원 효과
css코드
.mouse__cursol {
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;
}스크립트 코드
const cursor = document.querySelector(".mouse__cursol")
window.addEventListener("mousemove",function(e){
cursor.style.left = e.clientX - 25 + "px";
cursor.style.top = e.clientY -25 + "px";
});글자에 오버하면 나타나는 애니메이션 효과
html 코드
<div class="mouse__text">
<p>I want a car that makes me want to <span class="s1">compete</span> rather than a <span class="s2">car</span> that makes me <span class="s3">win</span>.</p>
<p>나는 나를 <span class="s4">이기게</span> 해주는 차보다는 <span class="s5">경쟁</span>하고 싶도록 해주는 <span class="s6">차</span>를 원한다.</p>
</div>css코드
.mouse__cursol.s1 {
background-color: rgba(red, green, blue, 0.8);
border-color: #1d8603;
}
.mouse__cursol.s2 {
background-color: rgba(red, green, blue, 0.8);
border-color: #00fa9a;
transform: scale(2) rotateY(720deg);
}
.mouse__cursol.s3 {
background-color: rgba(red, green, blue, 0.8);
border-color: #faf600;
transform: scale(1.5) rotateX(545deg);
}
.mouse__cursol.s4 {
background-color: rgba(red, green, blue, 0.8);
border-color: #f200ff;
transform: scale(7) rotateX(1080deg) rotateY(1080deg);
}
.mouse__cursol.s5 {
background-color: rgba(red, green, blue, 0.8);
border-color: #df0425;
transform: scale(5) skew(360deg) rotateX(1080deg) rotateY(1080deg);
border-radius: 0px;
}
.mouse__cursol.s6 {
background-color: rgba(red, green, blue, 0.8);
border-color: #0a37ff;
transform: scale(0.1);
}스크립트 코드
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)
});
});ClassList
classList는 DOMTokenList 객체로 element의 class 속성을 보여줍니다. classList가 읽기전용이어도 다양한 메소드를 통해 class 목록을 조작할 수 있습니다.
add()
element의 class 목록에 하나 이상의 css class를 추가하려면 classList의 add() 메소드를 사용하야합니다. 예를 들면 다음은 info class를 id가 content인 div element에 추가하는 코드입니다.
remove()
element의 css class를 삭제하기 위해서는 remove() 메소드를 사용하면 됩니다. 또한 add() 메소드와 마찬가지로 여러개의 클래스명을 한번에 제거할 수도 있습니다.
replace()
현재 존재하는 css class를 새로운 것으로 교체하기 위해서는 replace() 메소드를 사용하면 됩니다. 다음의 코드는 현재 존재하는 info class를 warning class로 바꾸는 코드입니다.
contains()
element가 특정 class를 가지고있는지 확인하기 위해서는 contains() 메소드를 사용하면됩니다. contain() 메소드는 classList에 특정한 class가 존재하면 true를 반환하고 아니면 flase를 반환합니다.
toggle()
element의 class 목록에 특정 class명이 들어있다면 toggle() 메소드는 그 class명을 지웁니다. 만약 class 목록에 그 class명이 없다면 toggle() 메소드는 그 class를 element의 class 목록에 추가합니다. 다음의 예제는 toggle() 메소드를 사용해 id가 content인 element에 visible class를 토글하는 코드입니다