Tutorial/webd

GSAP 패럴랙스 이펙트 : 가로/세로 나타나기 효과

by @webs 2023. 06. 01.

GSAP Parallax Effect : 가로/세로 나타나기 효과

난이도 중간

소스 다운로드

소개

안녕하세요! 웹스토리보이입니다. 이번에는 가로/세로 응용편입니다. 멋있게 가로 세로를 구현했는데, 애니메이션 효과를 주지 않는다면 별로겠죠! 세로 모드는 일반적인 효과이기 때문에 상관은 없지만, 가로 모드는 일반적인 효과로는 구현이 힘들기 때문에 따로 조치를 해주어야 합니다. 그렇다고 어렵지 않으니 잘 따라하시면 됩니다. 그럼 시작하겠습니다.

1. 기본 구조 만들기

1-1. 준비하기

GSAP를 배우는 시간이기 때문에 HTML/CSS 코딩은 생략하겠습니다. 기본 코딩은 복사해서 사용하겠습니다. 우선 웹폰트를 설정하고 GSAP에서 필요한 파일을 미리 셋팅해 놓겠습니다. GSAP는 자주 업데이트가 되기 때문에 제일 최선 버전을 사용하는게 좋습니다.

<!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>GSAP Scroll Effect</title>

    <!-- 웹폰트 설정 -->
    <link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap" rel="stylesheet">
</head>
<body>

    <!-- GSAP 라이브러리 설정 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/ScrollToPlugin.min.js"></script>
</body>
</html>

1-2. 기본 셋팅하기

소스는 그대로 복사해서 사용하겠습니다.

<!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>GSAP Scroll Effect</title>

    <link href="https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@100&display=swap" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        a {
            color: #fff;
            text-decoration: none;
        }
        body {
            color: #fff;
            font-family: "NexonLv1Gothic";
            font-weight: 300;
            background-color: #333;
        }
        #parallax__title {
            position: fixed;
            left: 20px;
            top: 20px;
            z-index: 1000;
        }
        #parallax__title h1 {
            font-size: 30px;
            border-bottom: 1px dashed #fff;
            margin-bottom: 10px;
            padding-bottom: 5px;
            font-weight: 400;
            display: inline-block;
        }
        #parallax__title p {
            font-size: 16px;
        }
        #parallax__title ul {
            margin-top: 10px;
        }
        #parallax__title li {
            display: inline;
        }
        #parallax__title li a {
            width: 20px; 
            height: 20px;
            border-radius: 50%;
            border: 1px dashed #fff;
            display: inline-block;
            text-align: center;
            line-height: 20px;
            font-size: 12px;
        }
        #parallax__title li.active a {
            background: #fff;
            color: #000;
        }

        /* parallax__cont */
        .parallax__item {
            width: 100%;
            height: 100vh;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .parallax__item__num {
            font-size: 5vw;
            position: absolute;
            right: 20px;
            bottom: 20px;
            font-family: "Lato";
            font-weight: 100;
            z-index: 100;
        }
        .parallax__item__imgWrap {
            width: 30%;
            padding-bottom: 18%;
            position: relative;
            overflow: hidden;
            border-radius: 10px;
        }
        .parallax__item__img {
            position: absolute;
            left: -5%; 
            top: -5%;
            width: 110%;
            height: 110%;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            filter: saturate(0%);
            transition: all 1s;
        }
        .parallax__item__img:hover {
            filter: saturate(100%);
            transform: scale(1.025);
        }
        #section1 .parallax__item__img {
            background-image: url(assets/img/images01@2.jpg);
        }
        #section2 .parallax__item__img {
            background-image: url(assets/img/images02@2.jpg);
        }
        #section3 .parallax__item__img {
            background-image: url(assets/img/images03@2.jpg);
        }
        #section4 .parallax__item__img {
            background-image: url(assets/img/images04@2.jpg);
        }
        #section5 .parallax__item__img {
            background-image: url(assets/img/images05@2.jpg);
        }
        #section6 .parallax__item__img {
            background-image: url(assets/img/images06@2.jpg);
        }
        #section7 .parallax__item__img {
            background-image: url(assets/img/images07@2.jpg);
        }
        #section8 .parallax__item__img {
            background-image: url(assets/img/images08@2.jpg);
        }
        #section9 .parallax__item__img {
            background-image: url(assets/img/images09@2.jpg);
        }
        #section1, #section3, #section5, #section7, #section9 {
            background-color: #111;
        }

        /* option */
        #parallax__cont {
            overflow: hidden;
        }
        #horizontal {
            display: flex;
            flex-wrap: nowrap;
            width: 500%;
        }
        #horizontal > section {
            width: 100%;
        }
    </style>
</head>
<body>
    <header id="parallax__title">
        <h1>GSAP Parallax Effect14</h1>
        <p>GSAP scrollTrigger - 가로/세로 나타나기 효과</p>
        <ul>
            <li><a href="gsap01.html">1</a></li>
            <li><a href="gsap02.html">2</a></li>
            <li><a href="gsap03.html">3</a></li>
            <li><a href="gsap04.html">4</a></li>
            <li><a href="gsap05.html">5</a></li>
            <li><a href="gsap06.html">6</a></li>
            <li><a href="gsap07.html">7</a></li>
            <li><a href="gsap08.html">8</a></li>
            <li><a href="gsap09.html">9</a></li>
            <li><a href="gsap10.html">10</a></li>
            <li><a href="gsap11.html">11</a></li>
            <li><a href="gsap12.html">12</a></li>
            <li><a href="gsap13.html">13</a></li>
            <li class="active"><a href="gsap14.html">14</a></li>
            <li><a href="gsap15.html">15</a></li>
        </ul>
    </header>
    <!-- //parallax__title  -->

    <main id="parallax__cont">
        <section id="section1" class="parallax__item">
            <span class="parallax__item__num">01</span>
            <figure class="parallax__item__imgWrap">
                <div class="parallax__item__img"></div>
            </figure>
        </section>
        <!-- //section1 -->

        <section id="section2" class="parallax__item">
            <span class="parallax__item__num">02</span>
            <figure class="parallax__item__imgWrap">
                <div class="parallax__item__img"></div>
            </figure>
        </section>
        <!-- //section2 -->

        <main id="horizontal">
            <section id="section3" class="parallax__item">
                <span class="parallax__item__num">03</span>
                <figure class="parallax__item__imgWrap">
                    <div class="parallax__item__img"></div>
                </figure>
            </section>
            <!-- //section3 -->

            <section id="section4" class="parallax__item">
                <span class="parallax__item__num">04</span>
                <figure class="parallax__item__imgWrap img4">
                    <div class="parallax__item__img"></div>
                </figure>
            </section>
            <!-- //section4 -->

            <section id="section5" class="parallax__item">
                <span class="parallax__item__num">05</span>
                <figure class="parallax__item__imgWrap img5">
                    <div class="parallax__item__img"></div>
                </figure>
            </section>
            <!-- //section5 -->

            <section id="section6" class="parallax__item">
                <span class="parallax__item__num">06</span>
                <figure class="parallax__item__imgWrap img6">
                    <div class="parallax__item__img"></div>
                </figure>
            </section>
            <!-- //section6 -->

            <section id="section7" class="parallax__item">
                <span class="parallax__item__num">07</span>
                <figure class="parallax__item__imgWrap img7">
                    <div class="parallax__item__img"></div>
                </figure>
            </section>
            <!-- //section7 -->
        </main>

        <section id="section8" class="parallax__item">
            <span class="parallax__item__num">08</span>
            <figure class="parallax__item__imgWrap">
                <div class="parallax__item__img"></div>
            </figure>
        </section>
        <!-- //section8 -->

        <section id="section9" class="parallax__item">
            <span class="parallax__item__num">09</span>
            <figure class="parallax__item__imgWrap">
                <div class="parallax__item__img"></div>
            </figure>
        </section>
        <!-- //section9 -->
    </main>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/ScrollToPlugin.min.js"></script>
    <script>
        
    </script>
</body>
</html>

2. 스크립트 작업하기

2-1. 작업하기

소스는 예제 가로/세로 효과에 추가적으로 작업하겠습니다. 가로모드를 할 경우 다음과 같이 CSS 설정이 필요합니다.

#parallax__cont {
    overflow: hidden;
}
#horizontal {
    display: flex;
    flex-wrap: nowrap;
    width: 500%;
}
#horizontal > section {
    width: 100%;
}

스크립트 통한 기존과 동일합니다. 단지 차이가 있다면 gsap.to 소스를 변수 scrollTween에 저장을 했습니다.

const horizontal = document.querySelector("#horizontal");
const sections = gsap.utils.toArray("#horizontal > section");

let scrollTween = gsap.to(sections, {
    xPercent: -100 * (sections.length - 1),
    ease: "none",
    scrollTrigger: {
        trigger: horizontal,
        start: "top top",
        end: () =>  "+=" + (horizontal.offsetWidth - innerWidth),
        pin: true,
        anticipatePin: 1
        scrub: 1,
        invalidateOnRefresh: true,
    }
});

여기서 특이한 점은 containerAnimation: scrollTween,을 설정해야 합니다. 그래야 애니메이션이 연동됩니다. 나머지는 동일합니다. 순서대로 잘 공부하셨다면 어려운 부분은 없을 겁니다. 여기서 markers를 설정하면 가로 모드에 맞추어서 표시됩니다. 단 라이브러리 소스가 최신 소스여야 합니다. 나머지 동일합니다.

gsap.to(".img4", {
    y: -200,
    duration: 2,
    ease: "elastic",
    scrollTrigger: {
        trigger: ".img4",
        containerAnimation: scrollTween,
        start: "left center",
        toggleActions: "play none reverse none",
        markers: false,
        id: "img4"
    }
});

gsap.to(".img5", {
    rotation: 720,
    duration: 2,
    ease: "elastic",
    scrollTrigger: {
        trigger: ".img5",
        containerAnimation: scrollTween,
        start: "left center",
        toggleActions: "play none reverse none",
        markers: false,
        id: "img5"
    }
});

gsap.to(".img6", {
    scale: 0.3,
    duration: 2,
    ease: "elastic",
    scrollTrigger: {
        trigger: ".img6",
        containerAnimation: scrollTween,
        start: "left center",
        toggleActions: "play none reverse none",
        markers: false,
        id: "img6"
    }
});

3. 마무리

잘 되시나요? 이제 GSAP 패럴랠스 효과도 거의 다 배웠습니다. 기본적인 효과는 이 정도만 알아도 애니메이션을 구현하는데 크게 문제가 없을 겁니다. 물론 이런 효과를 실제 사이트에 적용하는 것은 다른 문제이긴 합니다. 아마 쉽지가 않을거예요! 그래도 해봐야 실력이 늡니다. 여러분이 배운 효과를 잘 익혀서 여러분 사이트에 적용해서 자랑해주시면 감사하겠습니다. 수고하셨습니다. 🫥

완성 화면 소스 보기 유튜브

WEBSTORYBOY

재능은!
노력 끝에서 발견된다

14. GSAP Parallax Effect : 가로/세로 나타나기 효과

GSAP 패럴랙스 이펙트 : 가로/세로 나타나기 효과

소개

1. 기본 구조 만들기

1-1. 준비하기

1-2. 기본 셋팅하기

2. 스크립트 작업하기

2-1. 작업하기

3. 마무리

예제 목록

댓글

티스토리툴바

재능은!노력 끝에서 발견된다

14. GSAP Parallax Effect : 가로/세로 나타나기 효과

GSAP 패럴랙스 이펙트 : 가로/세로 나타나기 효과

소개

1. 기본 구조 만들기

1-1. 준비하기

1-2. 기본 셋팅하기

2. 스크립트 작업하기

2-1. 작업하기

3. 마무리

예제 목록

관련글

댓글

티스토리툴바

재능은!
노력 끝에서 발견된다