728x90
반응형
마우스 이펙트 - 마우스 따라다니기
수업 시간에 배운 내용을 복습하면서 해보겠습니다.
코드 보기(HTML, JAVASCRIPT, CSS / CSS1 / CSS2) / 완성화면
코드 블럭
<!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__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,
border-radius 0.3s
;
}
.mouse__cursor.s1 {
background-color: rgba(255, 255, 0, 0.3);
border-color: yellow;
}
.mouse__cursor.s2 {
background-color: rgba(0, 0, 255, 0.3);
border-color: blue;
transform: scale(2) rotateY(720deg);
}
.mouse__cursor.s3 {
background-color: rgba(255, 0, 225, 0.3);
border-color: blueviolet;
transform: scale(1.5) rotateX(540deg);
}
.mouse__cursor.s4 {
background-color: rgba(0, 255, 255, 0.3);
border-color: powderblue;
transform: scale(5);
border-radius: 0;
}
.mouse__cursor.s5 {
background-color: rgba(0, 255, 0, 0.3);
border-color: green;
transform: scale(3) skew(40deg);
}
.mouse__cursor.s6 {
background-color: rgba(255, 0, 0, 0.3);
border-color: red;
transform: scale(0.5) rotateX(720deg) rotateY(720deg);
}
.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: 2;
}
.mouse__text p:last-child {
font-size: 3vw;
}
.mouse__text p span {
color: yellow;
border-bottom: 1px solid yellow;
}
.mouse__info {
position: absolute;
left: 0;
bottom: 0;
font-size: 16px;
line-height: 1.6;
}
</style>
</head>
<body class="img01 bg01 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>
<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>I would be <span class="s1">happy</span> if I could always <span class="s2">focus</span> on the <span class="s3">present</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:dongjin6539@naver.com">dongjin6539@naver.com</a>
</footer>
<!-- //footer -->
</body>
</html>
코드 블럭 구성
- body 태그에 알맞은 header 구역, main 구역, footer 구역을 만들어줍니다.
- header 태그에 h1 태그, p 태그, ul 태그를 사용해서 제목, 텍스트, 목록을 입력해줍니다.
- main 태그에 div 태그를 사용해 class "mouse__wrap", "mouse__info" 명을 만들어줍니다.
- footer 태그에 알맞는 텍스트를 입력해줍니다.
- class "mouse__wrap"에 자식으로 div 태그를 사용해 class "mouse__cursor", "mouse__text" 명을 만들어주고 텍스트를 입력해줍니다.
- 공통적으로 사용할 CSS는 다른 페이지를 작성해서 효과적으로 이용합니다.
- class "mouse__info"에 마우스 위치의 이벤트 속성을 확인하기 위해 clientX, clientY, offsetX, offsetY, pageX, pageY, screenX, screenY를 입력해주고 각각 class명을 입력해줍니다.
- 이 부분 페이지에서만 사용되는 스타일은 class 명을 가져와 style 태그를 사용해 스타일을 입력해줍니다.
CSS1
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
@import url('https://webfontworld.github.io/earlyfont/EF_Hyunygothic.css');
@import url('https://webfontworld.github.io/Healthset/HealthsetGothic.css');
@import url('https://webfontworld.github.io/nixgon/NixgonFonts.css');
@import url('https://webfontworld.github.io/woori/Wooridaum.css');
@import url('https://webfontworld.github.io/NanumSquare/NanumSquare.css');
@import url('https://webfontworld.github.io/amore/AritaBuri.css');
@import url('https://webfontworld.github.io/tmoney/TmoneyRoundWind.css');
@import url('https://webfontworld.github.io/jikji/JHaebaragi.css');
@import url('https://webfontworld.github.io/nhn/Godo.css');
/* reset */
* {
margin: 0;
padding: 0;
color: #fff;
}
*, *::before, *::after {
box-sizing: border-box;
}
a {
text-decoration: none;
color: #222;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
li, ul, ol {
list-style: none;
}
img {
vertical-align: top;
width: 100%;
}
em {
font-style: normal;
}
.font01 {
font-family: 'NexonLv1Gothic';
font-weight: 300;
}
.font02 {
font-family: 'EF_Hyunygothic';
}
.font03 {
font-family: 'HealthsetGothic';
}
.font04 {
font-family: 'NixgonFonts';
}
.font05 {
font-family: 'Wooridaum';
}
.font06 {
font-family: 'NanumSquare';
}
.font07 {
font-family: 'AritaBuri';
}
.font08 {
font-family: 'TmoneyRoundWind';
}
.font09 {
font-family: 'JHaebaragi';
}
.font10 {
font-family: 'Godo';
}- 다양한 폰트를 사용하기 위해 종류를 여러 개 만들어줍니다.
CSS2
body {
width: 100%;
height: 100vh;
overflow: hidden;
background-position: center center;
background-size: cover;
}
body.img01{
background-image: url(../img/mouseEffect01-min.jpg);
}
body.img02{
background-image: url(../img/mouseEffect02-min.jpg);
}
body.img03{
background-image: url(../img/mouseEffect03-min.jpg);
}
body.img04{
background-image: url(../img/mouseEffect04-min.jpg);
}
body.img05{
background-image: url(../img/mouseEffect05-min.jpg);
}
body.img06{
background-image: url(../img/mouseEffect06-min.jpg);
}
body.img07{
background-image: url(../img/mouseEffect07-min.jpg);
}
body.img08{
background-image: url(../img/mouseEffect08-min.jpg);
}
body.img09{
background-image: url(../img/mouseEffect09-min.jpg);
}
body.img10{
background-image: url(../img/mouseEffect10-min.jpg);
}
body::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100vh;
z-index: -1;
}
body.bg01::after {
background: rgba(60, 136, 139, 0.8);
}
body.bg02::after {
background: rgba(121, 139, 47, 0.8);
}
body.bg03::after {
background: rgba(30, 50, 70, 0.8);
}
body.bg04::after {
background: rgba(140, 60, 107, 0.8);
}
body.bg05::after {
background: rgba(170, 71, 71, 0.8);
}
body.bg06::after {
background: rgba(75, 154, 66, 0.8);
}
body.bg07::after {
background: rgba(205, 207, 91, 0.8);
}
body.bg08::after {
background: rgba(140, 98, 60, 0.8);
}
body.bg09::after {
background: rgba(20, 122, 150, 0.8);
}
body.bg10::after {
background: rgba(117, 112, 171, 0.8);
}
/* header */
#header {
padding: 20px;
position: absolute;
left: 0;
top: 0;
}
#header h1 {
margin-bottom: 10px;
}
#header p {
margin-bottom: 10px;
}
#header a {
color: #fff;
}
#header li {
display: inline-block;
}
#header li a {
border: 1px solid #fff;
border-radius: 5px;
width: 30px;
height: 30px;
display: inline-block;
text-align: center;
padding-top: 5px;
}
#header li.active a {
background-color: #fff;
color: #000;
}
/* footer */
#footer {
position: absolute;
right: 0;
bottom: 0;
padding: 20px;
}
#footer a {
color: #fff;
}- body의 배경 이미지 속성과 색상을 입력해줍니다.
- 다른 목록의 페이지에서 사용될 코드 블럭의 id #header, #footer 공통적인 스타일 속성을 입력해줍니다.
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";
});
// 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);
});
});
</script>
자바스크립트 이용
- 브라우저 안에 모든 요소를 찾기 위해 window를 이용하고 addEventListener("mousemove") 메서드와 함수를 이용해서 요소 event를 사용해 document.querySelector( ).innerHTML=event.( )을 입력하는데 가로 안에는 마우스 위치의 이벤트 속성을 확인하기 위해 입력한 class명을 입력해줍니다.
- 커서 포인트의 모양을 마우스의 가운데로 가져오기 위해 선택자를 입력하고 addEventListener("mousemove") 메서드와 함수를 이용해서 css에 준모양의 너비, 높이의 절반을 뺀 값으로 계산해서 입력해줍니다.
- 코드 블럭에서 body 태그에 "mouse__text" class 안에 있는 텍스트에 span 태그와 class 명을 사용해서 스타일을 입력을 해줬습니다. 이것을 자바스크립트로 효과를 입력했습니다.
- document.querySelector(".class명").addEventListener("mouseover", function(){cursor.classList.add("class명")});과 document.querySelector(".class명").addEventListener("mouseover", function(){cursor.classList.remove("class명")});를 사용해 하나하나 다 입력해봤습니다. 이렇게 입력해보니 불편함이 있었습니다. 그래서 반복되는 부분을 찾고 달라지는 부분을 어떻게 하면 바꿀지 생각해봤습니다.
- 첫 번째 방법으로는 for문을 사용해서 바꿨습니다.
- 두 번째 방법으로는 for문을 forEach( )를 사용해서 바꿨습니다.
- 세 번째 방법으로는 속성값을 가져오는 getAttribute( ) 메서드를 사용해서 바꿨습니다.
참고
- 아직 잘 모르는 자바스크립트 속성에 대해 알아보겠습니다.
| 속성 | 속성 설명 |
| window | · 브라우저 안의 모든 요소들이 소속된 객체로, 최상위에 있기 때문에 어디서든 접근이 가능하다고 해서 '전역 객체'라고도 부른다. · 일반적으로 우리가 열고 있는 브라우저의 창(browser window)을 의미하고, 이 창을 제어하는 다양한 메서드를 제공한다. |
| getAttribute( ) | 속성 값을 가져옵니다. |
| mouseover | 요소 위에 포인터 요소 위치가 있을 때 |
| mouseout | 요소 위에 포인터 요소 위치가 벗어 났을 |
| add | Set 개체의 맨 뒤에 주어진 value의 새 요소를 추가합니다. |
| remove | 요소를 삭제합니다. |
| clientX | 브라우저 기준 X좌표의 값입니다. |
| clientY | 브라우저 기준 Y좌표의 값입니다. |
| offsetX | 요소 기준 X좌표의 값입니다. |
| offsetY | 요소 기준 Y좌표의 값입니다. |
| pageX | 페이지 기준 X좌표의 값입니다. |
| pageY | 페이지 기준 Y좌표의 값입니다. |
| screenX | 디바이스 기준 X좌표의 값입니다. |
| screenY | 디바이스 기준 Y좌표의 값입니다. |
- 아직 잘 모르는 css 속성에 대해 알아보겠습니다.
| 속성 | 속성 설명 |
| user-select | 사용자가 텍스트를 선택할 수 있는지 여부를 제어합니다. |
| pointer-events | 특정 그래픽 요소가 포인터 이벤트의 대상이 될 수 있는 상황(있는 경우)을 설정합니다. |
| transform: scale( ); | 요소에 크기 조절을 부여할 수 있습니다. |
| transform: rotate( ); | 요소에 회전을 부여할 수 있습니다. |
https://dongjin6539.github.io/web2023/javascript/mouse/mouseEffect01.html
728x90
반응형
