[Mouse Effect] 마우스 이펙트 02

마우스 이펙트 02 : GSAP

이번 시간에는 자바스크립트와는 살짝 다른 GSAP를 이용하여 마우스 이펙트를 만들어보도록 하겠습니다.

HTML 소스

header, main(마우스 커서 2개 & 명언), footer(모달 박스) 크게 3가지로 이루어져 있다. footer의 모달 박스 내용은 너무 길어지므로 생략한다. 모달 박스를 나타내는 방법에 대해서는 이전에 업로드한 슬라이드 이펙트 게시물을 참조할 것.

<body class="img04"> <!-- 백그라운드 이미지 / CSS로 이미지 출력시킴 -->
    <header id="header">
        <h1>JAVASCRIPT MOUSE EFFECT 02</h1>
        <p>마우스 이펙트 - 마우스 따라다니기(GSAP)</p>
        <ul>
            <li><a href="mouseEffect01.html">01</a></li>
            <li class="active"><a href="mouseEffect02.html">02</a></li>
            <li><a href="mouseEffect03.html">03</a></li>
            <li><a href="mouseEffect04.html">04</a></li>
            <li><a href="mouseEffect05.html">05</a></li>
            <li><a href="mouseEffect06.html">06</a></li>
            <li><a href="mouseEffect07.html">07</a></li>
        </ul>
    </header>
    <!-- //header -->

    <main id="main">
      <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__cursor2"></div>

        <div class="mouse__wrap">
          <p><span class="style1">The future</span> depends on <span class="style2">what we do</span> in the <span class="style3">present</span>.</p>
          <p><span class="style4">미래</span>는 <span class="style5">현재</span> 우리가 <span class="style6">무엇을 하는가</span>에 달려 있다.</p>
        </div>
      </section>
    </main>
    <!-- //main -->

    <footer>
        <!-- 모달 박스 내용 들어갈 곳. 길어지므로 생략. -->
    </footer>
    <!-- //footer -->
</body>

CSS 소스

마우스 커서 두 개(mouse__cursor, mouse__cursor2)의 모양을 만든다. 클래스값 active가 붙었을 때의 모양도 함께 기술한다. 공통/초기화 CSS 소스는 하단의 [CSS 소스 보기]버튼을 클릭하여 볼 수 있다.

.mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    z-index: 9999;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    user-select: none;
    pointer-events: none;
    transition: transform 0.3s, opacity 0.2s;
}
.mouse__cursor2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    z-index: 9998;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    user-select: none;
    pointer-events: none;
    transition: transform 0.3s, opacity 0.2s;
}
.mouse__cursor.active {
    transform: scale(0);
}
.mouse__cursor2.active {
    transform: scale(5);
    background: rgba(255,166,0,0.6);
}

JS 소스

GSAP 방식을 이용해서 마우스 커서가 움직였을 때의 스타일(CSS)을 입혀주도록 한다. (기존 방식과 함께 기술하였음) 그런 다음, 마우스 커서가 특정 문구 위에 올라갔을 때(= hover 됐을 때) active 효과를 붙여주고 커서가 떠났을 때는 active 효과를 제거해주도록 스크립트를 짰다.

const cursor = document.querySelector(".mouse__cursor");
const cursor2 = document.querySelector(".mouse__cursor2");
const span = document.querySelectorAll(".mouse__wrap span")

window.addEventListener("mousemove", e => {
    // 커서 좌표값 할당
    // cursor.style.left = e.pageX -5+ "px";
    // cursor.style.top = e.pageY -5+ "px";
    // cursor2.style.left = e.pageX -15+ "px";
    // cursor2.style.top = e.pageY -15+ "px";

    // GSAP
    gsap.to(cursor, {duration: 0.3, left: e.pageX -5, top:e.pageY -5});
    gsap.to(cursor2, {duration: 0.8, left: e.pageX -15, top:e.pageY -15});

    // 오버 효과
    // mouseenter / mouseover / 이벤트 버블링
    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");
        });
    });
});

결과

원본(HTML/JS) 소스 보기

CSS 소스 보기

'Effect > Mouse Effect' 카테고리의 다른 글

[Mouse Efffect] 마우스 이펙트 06 (2)	2022.09.29
[Mouse Effect] 마우스 이펙트 05 - 기울기 효과 / 글씨 반전 효과 (3)	2022.09.28
[Mouse Effect] 마우스 이펙트 04 - 이미지 효과 (5)	2022.09.22
[Mouse Effect] 마우스 이펙트 03 - 조명 효과 (4)	2022.09.22
[Mouse Effect] 마우스 이펙트 01 (6)	2022.09.05

코딩공책📚

[Mouse Effect] 마우스 이펙트 02 - GSAP

마우스 이펙트 02 : GSAP

HTML 소스

CSS 소스

JS 소스

결과

'Effect > Mouse Effect' 카테고리의 다른 글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[Mouse Effect] 마우스 이펙트 02 - GSAP

마우스 이펙트 02 : GSAP

HTML 소스

CSS 소스

JS 소스

결과

'Effect > Mouse Effect' 카테고리의 다른 글

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바