“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
안녕하세요 ヾ(≧▽≦*)o 오늘은 자바스크립트 마우스 이펙트 첫 번째 만드는 방법에 대해 총정리를 해보도록 하겠습니다.
reset CSS
마우스 이펙트 페이지를 10페이지를 만들어 줄건데
10페이지마다 폰트를 다르게 할 거라 각각 페이지별로 폰트를 지정해 줍니다.
저는 폰트어썸이라는 사이트에서 폰트를 다운받았습니다.
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');
@import url('https://webfontworld.github.io/miryang/MYArirangGothic.css');
@import url('https://webfontworld.github.io/woori/Wooridaum.css');
@import url('https://webfontworld.github.io/suseong/SuseongBatang.css');
@import url('https://webfontworld.github.io/knps/KNPSBandali.css');
@import url('https://webfontworld.github.io/NexonMabinogi/MabinogiClassic.css');
@import url('https://webfontworld.github.io/jeongseon/JSDongkang.css');
@import url('https://webfontworld.github.io/dgb/IMHyemin.css');
@import url('https://webfontworld.github.io/Cafe24Ssukssuk/Cafe24Ssukssuk.css');
@import url('https://webfontworld.github.io/seoulhangang/SeoulHangangC.css');
/* reset */
* {
margin: 0;
padding: 0;
}
*, *::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: 300px;
}
.font02 {
font-family: 'MYArirangGothic';
font-weight: 300px;
}
.font03 {
font-family: 'Wooridaum';
font-weight: 300px;
}
.font04 {
font-family: 'SuseongBatang';
font-weight: 300px;
}
.font05 {
font-family: 'KNPSBandali';
font-weight: 300px;
}
.font06 {
font-family: 'MabinogiClassic';
font-weight: 300px;
}
.font07 {
font-family: 'JSDongkang';
font-weight: 300px;
}
.font08 {
font-family: 'IMHyemin';
font-weight: 300px;
}
.font09 {
font-family: 'Cafe24Ssukssuk';
font-weight: 300px;
}
.font10 {
font-family: 'SeoulHangangC';
font-weight: 300px;
}mouse CSS
다음은 마우스css를 만들어 줍니다.
body {
width: 100%;
overflow: hidden;
height: 100vh;
background-position: center center;
background-size: cover;
}
body.img01{
background-image: url(../img/mouseEffect01-1.jpg);
}
body.img02{
background-image: url(../img/mouseEffect02-1.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(245, 219, 188, 0.401);
}
body.bg02::after {
background: rgba(186, 235, 195, 0.353);
}
body.bg03::after {
background: rgba(158, 99, 99, 0.87);
}
body.bg04::after {
background: rgba(224, 174, 174, 0.87);
}
body.bg05::after {
background: rgba(250, 226, 226, 0.87);
}
body.bg06::after {
background: rgba(83, 88, 20, 0.87);
}
body.bg07::after {
background: rgba(177, 175, 72, 0.87);
}
body.bg08::after {
background: rgba(181, 186, 96, 0.87);
}
body.bg09::after {
background: rgba(231, 240, 150, 0.87);
}
body.bg10::after {
background: rgba(237, 255, 217, 0.87);
}
/* 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;
width: 30px;
height: 30px;
display: inline-block;
color: #fff;
}
#header li.active a {
background-color: #fff;
color: #000;
}
/* footer */
#footer {
position: absolute;
right: 0;
bottom: 0;
padding: 20px;
}
#footer a {
color: #fff;
}내가 원하는 이미지를 저장해온 뒤 body에 페이지별로 보이고 싶은 이미지를 각각 저장시켜줍니다.
각각 페이지별로 이미지와 어울리는 색상을 지정해 페이지를 열었을 때 이미지와 어울리는 배경을 설정해 줍니다.
앞으로 사용할 이미지나 폰트는 calss로 지정해 주었기 때문에 뒤에 이름을 붙여 불러와 줍니다.
HTML
<body class="img01 bg01 font01">
<header id="header">
<h1>Javascript mouseEffect01</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><span class="s1">Antique</span> furniture is <span class="s2">cozy</span> and <span class="s3">warm</span>, <span class="s4">providing</span> <span class="s5">psychological</span> <span class="s6">stability</span></p>
<p><span class="s7">엔틱한</span> 가구들은 <span class="s8">아늑하고</span> <span class="s9">따뜻해</span> <span class="s10">심리적인</span> <span class="s11">안정감</span>을 <span class="s12">줍니다</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:yuna243441@naver.com">yuna243441@naver.com</a>
</footer>
<!--footer-->배경에 사진을 넣고, 그 위에 내가 넣고 싶은 문구를 지정해 한국어와 영어로 각각 지정해 준 뒤
그 문구 위로 마우스 효과를 주도록 하겠습니다.
또한 좌표값을 화면에 띄워주기 위해 ul , li 태그를 사용해 내용들을 적어줍니다.
중간에 좌표값을 스크립트 부분으로 처리해주기 위해 span처리를 해줍니다.
마우스 커서에 따른 좌표값 스크립트 짜기
<script>
window.addEventListener("mousemove", function(event){
});
window.addEventListener("mousemove",function(event){
document.querySelector(".clientX").innerText = event.clientX;
document.querySelector(".clientY").innerText = event.clientY;
document.querySelector(".offsetX").innerText = event.offsetX;
document.querySelector(".offsetY").innerText = event.offsetY;
document.querySelector(".pageX").innerText = event.pageX;
document.querySelector(".pageY").innerText = event.pageY;
document.querySelector(".screenX").innerText = event.screenX;
document.querySelector(".screenY").innerText = event.screenY;
});window.addEventListener를 통해 마우스가 움직였을 때 이벤트 함수가 적용이 되도록 설정해 줍니다.
.clientX 부터 screenY까지 innerHTML을 써 좌표값이 출력될 수 있게 설정해 줍니다.
forEach문으로 줄여서 출력하기
// 위에 걸 foreach를 사용해보기
document.querySelectorAll(".mouse__info ul li span").forEach((el,index) => {
el.innerHTML = index+1 +"00"
});forEach문을 화살표 함수를 이용해 사용한다면 위 코드보다 훨씬 가독성이 좋고 편리한 스크립트를
완성할 수 있습니다.
index+1+"00"은 좌표값이 n00의 값으로 끝나기 때문에 00을 붙여줘야 합니다.
마우스 커서 스크립트
//선택자
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";
});변수를 설정해 마우스 커서가 움직일 때 함수를 실행시키도록 설정해줍니다.
여기서 -25를 한 이유는 마우스의 원이 중앙으로 오도록 설정해준 것입니다.
이제 span처리를 한 부분마다 각자 다른 애니메이션 효과를 주기 위해 내가 설정한 문구에 span을 설정해 줍니다.
<div class="mouse__text">
<p><span class="s1">Antique</span> furniture is <span class="s2">cozy</span> and <span class="s3">warm</span>, <span class="s4">providing</span> <span class="s5">psychological</span> <span class="s6">stability</span></p>
<p><span class="s7">엔틱한</span> 가구들은 <span class="s8">아늑하고</span> <span class="s9">따뜻해</span> <span class="s10">심리적인</span> <span class="s11">안정감</span>을 <span class="s12">줍니다</span>.</p>
</div>span class="s1" ~ span class="s6"까지 총 6개의 sapn을 만들어 내가 지정한 문구 중 강조할 부분을 span처리해 줍니다.
기존 방식으로 스크립트 짜기
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()로 선택한 뒤 addEventListener를 통해 마우스를 위에 오버했을 때 효과가 나타나도록 함수를 실행시킵니다.
마우스를 아웃했을 때 효과가 제거되는 스크립트도 짜주어야 합니다.
위에 걸 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);
});
}위에 긴 코드를 for문을 통해 간략히 출력할 수 있습니다.
si값을 지정해준 뒤 총 6개 메서드 안에 들어가는 값은 s1 ~ s6이기 때문에 문자열을 쓴 뒤
".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.add("s"+(num+1));
});
});for문을 또다시 forEach문을 사용해 코드를 짤 수 있습니다.
forEach 앞에 선택자를 이용해 선택해줍니다.
이대 .mouse__text span을 선택해준 뒤 요소값 안엔 span과 num을 넣어주었습니다.
num은 0부터 시작하는 게 아닌 1부터 시작해야 하므로 +1을 해줍니다.
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.3s;
}
.mouse__cursor.s1 {
background-color: rgba(255, 225, 0, 0.4);
border-color: #e46b3f;
}
.mouse__cursor.s2 {
background-color: rgba(115, 208, 106, 0.4);
border-color: #ecdc67;
transform: scale(2) rotateY(720deg);
}
.mouse__cursor.s3 {
background-color: rgba(255, 225, 0, 0.4);
border-color: #e46b3f;
transform: scale(1.5) rotateX(540deg);
}
.mouse__cursor.s4 {
background-color: rgba(115, 208, 106, 0.4);
border-color: #ecdc67;
transform: scale(10);
}
.mouse__cursor.s5 {
background-color: rgba(255, 225, 0, 0.4);
border-color: #e46b3f;
transform: scale(40deg) skew(40deg);
border-radius: 10px;
}
.mouse__cursor.s6 {
background-color: rgba(115, 208, 106, 0.4);
border-color: #ecdc67;
transform: scale(0.1);
}
.mouse__text {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
}
.mouse__text p {
font-size: 2vw;
line-height: 1.9;
}
.mouse__text p:last-child {
font-size: 3vw;
}
.mouse__text p span {
color:#e46b3f;
border-bottom: 1px dashed #e46b3f;
}
.mouse__info {
position: absolute;
left: 0;
bottom: 0;
padding: 20px;
font-size: 16px;
line-height: 1.6;
}
</style>각각 s1 ~ s6 까지 다른 애니메이션 효과를 설정해 줍니다.
getAttribute();
// 속성을 가져오기 getAttribute();
document.querySelectorAll(".mouse__text span").forEach(function(span){
let attr = span.getAttribute("class");
console.log(attr);
//attr = s1 s2 s3 s4 s5 s6
span.addEventListener("mouseover",function(){
cursor.classList.add(attr);
});
span.addEventListener("mouseout",function(){
cursor.classList.remove(attr);
});
});
// 속성을 설정하기 setAttribute();getAttribute란 javascript에서 DOM 요소의 속성 값을 가져오는 메서드입니다.
attr 안에는 s1 ~ s6이 들어있기 때문에 변수를 지정해주고 그 안에 getAttribute를 사용해 속성 값을 가져옵니다.
📜 몰랐던 용어 정리
| 속성 | 설명 |
| window.addEventListener | DOM 이벤트 처리하기 위한 메소드 중 하나, 이 메서드를 사용하면 특정 이벤트(클릭, 마우스 이동, 등)가 발생할 때 실행할 함수를 등록할 수 있습니다. |
| getAttribute | javjascript에서 DOM요소의 속성 값을 가져오는 메서드 |
| setAttribute | javjascript에서 DOM요소의 속성 값을 설정하는 메서드 |
🥰 완성 화면입니다.
🎉 오늘도 감사합니다.
'javascript' 카테고리의 다른 글
| 자바스크립트 마우스 이펙트 세 번째 총정리 (14) | 2023.03.21 |
|---|---|
| 자바스크립트 마우스 이펙트 두 번째 총정리 (13) | 2023.03.21 |
| 자바스크립트 복습 / 비트연산자, 전치, 후치 연산자 (14) | 2023.03.12 |
| 모르는 공부 정리 / 데이터 제어하기 (13) | 2023.03.12 |
| 데이터 불러오기 총정리 (15) | 2023.03.06 |