...
728x90
반응형
마우스 위치를 따라다니는 효과 만들기 (gsap 사용)
페이지 미리보기
HTML 작성하기
<!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>02. 마우스 이펙트</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/mouse.css">
</head>
<body class="img02 bg02 danjunghae">
<header id="header">
<h1>Javascript Mouse Effect02</h1>
<p>GSAP를 이용해서 마우스를 따라다니기</p>
<ul>
<li><a href="mouseEffect01.html">1</a></li>
<li class="active"><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__cursor2"></div>
<div class="mouse__cursor3"></div>
<div class="mouse__text">
<p>Age is no guarantee of <span>maturity</span>.</p>
<p>나이가 <span>성숙</span>을 보장하지는 않는다.</p>
</div>
</div>
</main>
<!-- main -->
<footer id="footer">
<a href="mailto:gnsrbdi@naver.com">gnsrdbi@naver.com</a>
</footer>
<!-- footer -->
</body>
</html>HTML 정리해보기
- 1번페이지와 거의 동일하게 만들었지만 마우스를 따라다니는 "mouse__cursor" 박스를 2개 더 만들어 총 세개를 만들어 주었습니다.
- 2번 페이지에서는 2번 이미지와 2번의 배경색을 사용하기 위해 class에 img02와 bg02를 추가했습니다.
CSS 작성하기
.mouse__wrap {
cursor: none;
}
.mouse__text {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: hidden;
}
.mouse__text p {
font-size: 2vw;
line-height: 1.5;
}
.mouse__text p:last-child {
font-size: 4vw;
}
.mouse__text p span {
color: rgb(243, 223, 136);
}
.mouse__cursor {
position: absolute;
left: 0;
top: 0;
width: 10px;
height: 10px;
z-index: 9999;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
user-select: none;
pointer-events: none;
transition: transform 0.3s;
}
.mouse__cursor2 {
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
z-index: 9998;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
user-select: none;
pointer-events: none;
transition: transform 0.3s;
}
.mouse__cursor3 {
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
z-index: 9997;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.3);
user-select: none;
pointer-events: none;
transition: transform 0.3s, border 0.3s;
}
.mouse__cursor.active {
transform: scale(0);
}
.mouse__cursor2.active {
transform: scale(5);
background-color: #ffd380a6;
}
.mouse__cursor3.active {
transform: scale(5);
background-color: #ffd380a6;
}
.mouse__cursor.active2 {
transform: scale(0);
}
.mouse__cursor2.active2 {
transform: scale(3) rotateY(540deg);
background-color: #dfff4ea6;
}
.mouse__cursor3.active2 {
transform: scale(3);
background-color: #fcb74f;
}
.mouse__cursor.active3 {
transform: scale(2);
background-color: #da6e6e;
border-radius: 20%;
}
.mouse__cursor2.active3 {
transform: scale(3) rotateY(540deg);
border: 2px dotted #cfc750;
background-color: #9fb639a6;
}
.mouse__cursor3.active3 {
transform: scale(3) rotateX(540deg);
border: 2px dotted #bbe966;
background-color: #74c952;
}CSS 정리해보기
- 1번 페이지와 reset.css / mouse.css 를 사용하는 것은 동일합니다.
- "mouse__cursor" 세 부분에 같은 모양에 크기만 다르게 설정해 주었습니다.
- 1번 페이지에는 본문의 span 태그에만 효과를 주었는데 2번 페이지에는 제목부분과 하단 메일부분에도 효과를 주기위해 active 또한 번호를 붙여 세 개를 미리 작업해 주었습니다.
Javascript 작성하기
// 선택자
const cursor = document.querySelector(".mouse__cursor");
const cursor2 = document.querySelector(".mouse__cursor2");
const cursor3 = document.querySelector(".mouse__cursor3");
const cursors = document.querySelectorAll(".mouse__text span");
window.addEventListener("mousemove", e => {
gsap.to(cursor, {duration: 0.2, left: e.pageX -5, top: e.pageY -5});
gsap.to(cursor2, {duration: 0.4, left: e.pageX -15, top: e.pageY -15});
gsap.to(cursor3, {duration: 0.6, left: e.pageX -20, top: e.pageY -20});
cursors.forEach(function (el){
el.addEventListener("mouseenter", () => {
cursor.classList.add("active");
cursor2.classList.add("active");
cursor3.classList.add("active");
});
el.addEventListener("mouseleave", () => {
cursor.classList.remove("active");
cursor2.classList.remove("active");
cursor3.classList.remove("active");
});
});
// 제목 부분
document.querySelector("#header h1").addEventListener("mouseenter", () => {
cursor.classList.add("active2");
cursor2.classList.add("active2");
cursor3.classList.add("active2");
});
document.querySelector("#header h1").addEventListener("mouseleave", () => {
cursor.classList.remove("active2");
cursor2.classList.remove("active2");
cursor3.classList.remove("active2");
});
// 메일 부분
document.querySelector("#footer a").addEventListener("mouseenter", () => {
cursor.classList.add("active3");
cursor2.classList.add("active3");
cursor3.classList.add("active3");
});
document.querySelector("#footer a").addEventListener("mouseleave", () => {
cursor.classList.remove("active3");
cursor2.classList.remove("active3");
cursor3.classList.remove("active3");
});
});Javascript 정리해보기
- 1번 페이지와 마찬가지로 마우스의 좌표 값을 받아오기 위해 window.addEventListener("mousemove", e => {})로 작업해주었습니다.
- 2번 페이지에는 함수를 화살표 함수로 사용하였습니다.
- 1번 페이지와 달리 gsap를 사용해 마우스의 좌표를 각각의 cursor들에게 넣어주었습니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>- gsap를 사용하기 위해 gsap 사이트에서 링크를 받아왔습니다.
- gsap 기본문 : gsap.to(선택자, {});
- 그 외 에는 각각의 선택자에게 addEventListener(mouseenter) // (mouseleave) 를 사용해 각각의 cursor에게 "active" class를 추가해 주었습니다.
- mouseenter : 마우스가 요소에 들어갔을 시 // mouseleave : 마우스가 요소에서 나왔을 시
- 본문의 span은 한 개가 아니기 때문에 querySelectorAll과 forEach를 사용하였고
- 제목과 메일부분은 querySelector를 사용해 각각의 선택자를 만들어 적용하였습니다.
이상으로 마우스 효과를 적용한 페이지(gsap 사용)를 만들어 보았습니다 !
728x90
반응형