GSAP 실전 활용 예시 간단 정리02

안녕하세요. 오늘은 필자가 GSAP를 사용하여 만들어본 코드 설명글입니다.

포스팅에 앞서 필자도 부족한 부분이 많으니 양해 부탁드립니다.

아래의 코드는 HTML, CSS, JavaScript(GSAP 라이브러리 포함)를 사용하여 구현된 마우스 호버 효과 예제입니다. 각 부분을 자세히 설명하겠습니다.

HTML 구조

<div id="wrap">
    <header id="header">
        <div class="header__inner">
            <h1><a href="index.html">JavaScript <em>02</em></a></h1>
        </div>
    </header>
    <main id="main">
        <div class="cursor"></div>
        <div class="main__inner">
            <p id="jsText">
                <span class="char char1">J</span>
                <span class="char char2">a</span>
                <span class="char char3">v</span>
                <span class="char char4">a</span>
                <span class="char char5">S</span>
                <span class="char char6">c</span>
                <span class="char char7">r</span>
                <span class="char char8">i</span>
                <span class="char char9">p</span>
                <span class="char char10">t</span>
            </p>
        </div>
        <div class="main__info">
            <ul>
                <li>clientY <span class="clientY">0</span></li>
                <li>offsetY <span class="offsetY">0</span></li>
                <li>pageY <span class="pageY">0</span></li>
                <li>screenY <span class="screenY">0</span></li>
            </ul>
        </div>
    </main>
    <footer id="footer">
        <div class="footer__inner">
            <nav>
                <ul>
                    <li><a href="mouse01.html">01</a></li>
                    <li class="active"><a href="mouse02.html">02</a></li>
                    <li><a href="mouse03.html">03</a></li>
                    <li><a href="mouse04.html">04</a></li>
                </ul>
            </nav>
            <div class="link">
                <ul>
                    <li><a href="parallax01.html">Parallax</a></li>
                </ul>
            </div>
        </div>
    </footer>
</div>

• <div id="wrap">: 페이지 전체를 감싸는 컨테이너 요소입니다.
• <header>, <main>, <footer>: 페이지의 헤더, 메인 콘텐츠, 푸터를 나타내는 요소들입니다.
• .cursor: 마우스 커서를 나타내는 요소로, 마우스의 위치를 따라 다닙니다.
• .main__inner p: 메인 영역 내의 텍스트를 포함하는 요소입니다.
• .char: 각 글자를 나타내는 요소로, 특정 클래스를 가지고 있습니다.
• .main__info ul: 정보를 나타내는 리스트 요소입니다.

CSS 스타일 설명

커서 스타일

.cursor {
    width: 100px;
    height: 100px;
    background-color: #ffffff43;
    border: 1px solid #ffffff20;
    backdrop-filter: blur(5px);
    position: absolute;
    left: -100px;
    top: -100px;
    border-radius: 50%;
    z-index: 10000;
    user-select: none;
    pointer-events: none;
    transition: transform 1s, background-color 0.3s, border 0.3s;
}

• width, height: 커서의 너비와 높이를 설정합니다.
• background-color: 커서의 배경색을 지정합니다. #ffffff43은 흰색(white)의 투명도(알파 값)가 43%인 색상입니다.
• border: 커서의 테두리 스타일을 지정합니다.
• backdrop-filter: 배경에 흐림 효과를 적용합니다.
• position: 커서의 위치를 설정합니다. absolute로 설정하여 페이지 내의 절대 위치를 지정합니다.
• left, top: 커서의 초기 위치를 설정합니다. -100px로 설정하여 페이지 밖으로 이동시킵니다.
• border-radius: 커서의 모서리를 둥글게 만듭니다.
• z-index: 커서의 쌓임 순서를 결정합니다. 높은 값일수록 위에 위치합니다.
• user-select: 사용자 선택을 막습니다.
• pointer-events: 마우스 이벤트를 무시합니다.
• transition: 변화를 부드럽게 처리하기 위한 애니메이션 효과를 설정합니다.

글자 스타일

.char {
    display: inline-block;
    transition: color 0.3s;
    color: #fff;
}

• display: 글자를 인라인 블록 요소로 표시합니다.
• transition: 변화가 일어날 때 애니메이션 효과를 적용합니다. 여기서는 글자 색상 변화에 대한 효과를 지정합니다.
• color: 글자의 기본 색상을 설정합니다. #fff는 흰색(white)을 나타냅니다.

다른 요소 스타일

그 외에도 페이지의 다양한 요소들에 대한 스타일이 있습니다. 각 요소들은 해당 클래스 또는 태그에 대해 특정 스타일을 지정하고 있습니다. 예를 들어,

• .main__inner p: 메인 영역 내의 <p> 태그에 대한 스타일을 설정합니다.
• .main__info ul li: 정보를 표시하는 리스트 요소에 대한 스타일을 설정합니다.

각 스타일의 의미와 기능

위의 CSS 코드는 각 요소들에 대해 다양한 스타일을 지정하여 웹 페이지의 모양과 느낌을 결정합니다. 각 속성들은 다음과 같은 역할을 수행합니다.

• 요소의 크기, 위치, 색상 등을 설정하여 레이아웃을 결정합니다.
• 애니메이션 효과를 부여하여 사용자에게 시각적인 효과를 제공합니다.
• 특정 요소의 동작을 제어하거나 스타일을 변경합니다.

이러한 CSS 코드는 HTML과 JavaScript와 함께 사용되어 웹 페이지를 더욱 동적이고 매력적으로 만듭니다. 페이지의 각 요소들이 어떻게 표시되고 동작하는지 이해하기 쉽도록 스타일이 적용되어 있습니다.

JavaScript (GSAP) 코드

// 마우스 이벤트 처리
window.addEventListener("mousemove", function (event) {
    // 마우스 위치 정보를 표시합니다.
    document.querySelector(".clientY").innerText = event.clientY;
    document.querySelector(".offsetY").innerText = event.offsetY;
    document.querySelector(".pageY").innerText = event.pageY;
    document.querySelector(".screenY").innerText = event.screenY;
});

// 커서 위치 설정
document.addEventListener("mousemove", (event) => {
    gsap.to(".cursor", { duration: 0.6, left: event.clientX - 50, top: event.clientY - 50 });
});

// 각 글자에 대해 마우스 호버 이벤트 처리
const chars = document.querySelectorAll('.char');
const colors = ['#ff6347', '#00bfff', '#32cd32', '#9370db', '#ffa500', '#8a2be2', '#20b2aa', '#f08080', '#7fff00', '#4682b4'];

chars.forEach((char, index) => {
    // 마우스 호버 시 색상 변경
    char.addEventListener('mouseenter', () => {
        gsap.to(char, { duration: 0.3, color: colors[index % colors.length] }); // 호버 시 다른 색상으로 변경
    });

    // 마우스가 떠날 때 원래 색상으로 변경
    char.addEventListener('mouseleave', () => {
        gsap.to(char, { duration: 0.3, color: '#ffffff' }); // 마우스가 떠날 때 흰색으로 변경
    });
});

• window.addEventListener("mousemove", ...): 마우스 이벤트를 감지하여 마우스 위치 정보를 표시합니다.
• document.addEventListener("mousemove", ...): 마우스 이벤트를 감지하여 .cursor 요소의 위치를 마우스 위치에 따라 조정합니다.
• chars.forEach((char, index) => { ... }): 각 글자 요소에 대해 반복적으로 이벤트를 추가합니다.
  • char.addEventListener('mouseenter', ...): 글자에 마우스 호버 시 GSAP를 사용하여 색상을 변경합니다.
  • char.addEventListener('mouseleave', ...): 마우스가 떠날 때 글자의 색상을 원래 색상(흰색)으로 변경합니다.

이 예제는 마우스 호버 시 텍스트의 색상이 변경되는 효과를 GSAP를 사용하여 구현한 것입니다. 각 요소들의 역할과 코드 내용을 효과적으로 설명하였습니다.

오늘도 필자의 부족한 글 읽어주셔서 감사합니다.