Leeyanggoo
[JS] 마우스 이펙트 만들기2!! GSAP를 이용해 보자! 본문
이전의 첫 번째 마우스 이펙트 포스팅에서는 mouseover를 이용한 마우스 효과를 알아봤습니다!
또한 clientX와 같은 이벤트 객체로 위치 정보를 불러오고, getAtrtibute()를 이용해 코드도 축약해봤습니다.
이번엔 자바스크립트 라이브러리인 "GSAP"를 이용해서 이펙트를 만들어보겠습니다!
<main id="main">
<div class="mouse__wrap">
<div class="mouse__cursor"></div>
<div class="mouse__cursor2"></div>
<div class="mouse__text">
<p>Have you ever been <span>fiery passion</span> to anyone?</p>
<p>너는 누구에게 한번이라도 <span>뜨거운</span> 사람이었느냐</p>
</div>
</div>
</main>
이번 예제의 HTML 코드입니다.
안도현 시인의 유명한 시 "너에게 묻는다"를 가져와봤습니다.
저번과는 다르게 "mouse__cursor" div가 2개가 있는 걸 보실 수 있습니다.
우리는 커서를 2개 만들어서 하나는 포인터를 다른 하나는 포인터를 따라오는 원을 만들 예정입니다!
GSAP 사용법과 사용 예시!!
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
//스크립트 태그 위에 GSAP 라이브러리 추가
// 선택자
const cursor = document.querySelector(".mouse__cursor");
const cursor2 = document.querySelector(".mouse__cursor2");
// 커서 좌표값 할당
window.addEventListener("mousemove", e => {
// cursor.style.left = e.pageX + "px"
// cursor.style.top = e.pageY + "px"
// cursor2.style.left = e.pageX + "px"
// cursor2.style.top = e.pageY + "px"
//gsap
gsap.to(cursor, {duration: 0.3, left: e.pageX -5, top: e.pageY -5}); //".mouse__cursor" 넣어도 가능
gsap.to(cursor2, {duration: 0.8, left: e.pageX -15, top: e.pageY -15});
});
| clientX | 브라우저 기준 X 좌표 값 |
| clientY | 브라우저 기준 Y 좌표 값 |
| offsetX | 요소 기준 X 좌표 값 |
| offsetY | 요소 기준 Y 좌표 값 |
| pageX | 페이지 기준 X 좌표 값 |
| pageY | 페이지 기준 Y 좌표 값 |
| screenX | 디바이스 기준 X 좌표 값 |
| screenY | 디바이스 기준 Y 좌표 값 |
이번 예제는 두 개의 cursor를 querySelector()로 선택했습니다.
그리고 원래라면 'cursor.style.left = e.clientX -25 + "px";'처럼 client를 이용해 커서에 좌표 값을 할당했습니다.
그러나 이번엔 자바스크립트 라이브러리인 "GSAP"를 이용했습니다.
"GSAP"는 GreenSock Animation Platform의 약자로, JavaScript로 만들어진 애니메이션 라이브러리입니다.
jQuery와 달리, DOM 조작보다는 CSS 기반 애니메이션에 중점을 두기 때문에 속도가 빠르고, 하드웨어 가속 기능을 활용하여 모바일 기기에서도 빠르고 부드러운 애니메이션을 구현할 수 있는 장점이 있습니다!
"duration"의 시간은 지속으로 커서를 따라다니는 도형을 조금 더 부드럽게 해주는 효과가 있습니다.
GSAP 사용법
1. GSAP 홈페이지(https://greensock.com/)에 접속해서 src을 복사한다.
2. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>를 <script> 태그 위에 적어서 라이브러리를 추가한다.
3. GSAP의 docs 문서(https://greensock.com/docs/)를 참고해 원하는 효과를 추가한다.
이번 예제는 gsap.to(적용할 요소 혹은 선택자, {효과})를 이용했습니다.
"duration"을 사용하면 커서의 이동이 좀 더 부드럽게 보이는 효과를 줄 수 있습니다!
cursor와 cursor2에 시간차를 두면 따라오는 효과를 만들 수 있습니다.
document.querySelectorAll(".mouse__text span").forEach(span => {
span.addEventListener("mouseenter", () =>{
cursor.classList.add("active");
cursor2.classList.add("active");
});
span.addEventListener("mouseleave", () =>{
cursor.classList.remove("active");
cursor2.classList.remove("active");
});
});
document.querySelectorAll("#header ul").forEach(ul => {
ul.addEventListener("mouseover", () =>{
cursor.classList.add("active2");
cursor2.classList.add("active2");
});
ul.addEventListener("mouseout", () =>{
cursor.classList.remove("active2");
cursor2.classList.remove("active2");
});
});
document.querySelectorAll("footer").forEach(footer => {
footer.addEventListener("mouseover", () =>{
cursor.classList.add("active3");
cursor2.classList.add("active3");
});
footer.addEventListener("mouseout", () =>{
cursor.classList.remove("active3");
cursor2.classList.remove("active3");
});
});
mouse와 관련된 여러 이벤트 목록 확인하고 가자!
| mousedown | 마우스 버튼을 클릭했을 때 |
| mouseup | 마우스 버튼을 떼는 경우 |
| mousemove | 마우스를 움직이는 경우 |
| mouseenter | 요소 위에 포인터 요소 위치가 있을 때 |
| mouseleave | 요소 위에 포인터 요소 위치가 벗어났을 때 |
| mouseover | 요소 위에 포인터 요소 위치가 있을 때 |
| mouseout | 요소 위에 포인터 요소 위치가 벗어났을 때 |
위의 7가지 속성은 마우스와 관련된 여러 이벤트리스너의 목록입니다.
위의 예제 코드에서는 "mouseenter, mousemove, mouseleave, mouseout"를 이용해 강조하고 싶은 문구를 커서가 지나가면 효과가 발생하도록 했습니다.
각각의 addEventListener("mouse 이벤트")에 쓰인 속성을 확인해 보세요!!
😮💨 이번 예제 보러 가기
