Post

PARALAX 효과 살펴보기

Posted
Preview Image
By nicejmp1 6 min read

PARALLAX scrollTrigger - 글자 나타나기

안녕하세요! 오늘은 간단한 trigger 효과 중 글자를 하나씩 쪼개서 나타나는 효과를 알려드리겠습니다.!!

먼저 html 코드를 짜도록 하겠습니다. 외우는 것보다 보면서 이렇게 흘러간다고 생각하시면 됩니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107

<body>
    <div id="wrap">
        <header id="header">
            <div class="header__inner">
                <h1><a href="index.html">Parallax Effect</a><em> 06</em></h1>
                <p>GSAP scrollTrigger - 나타나기</p>

                <div class="link">
                    <ul>
                        <li><a href="mouse01.html">mouse</a></li>
                    </ul>
                </div>
            </div>
        </header>
        <!-- //header -->

        <main id="parallax__cont">
            <section id="section1" class="parallax__item">
                <span class="parallax__item__num">01</span>
                <h2 class="parallax__item__title">section1</h2>
                <figure class="parallax__item__imgWrap">
                    <div class="parallax__item__img"></div>
                </figure>
                <p class="parallax__item__desc split">높은 목표를 세우고, 스스로 채찍질 한다.</p>
            </section>
            <!-- //section1 -->

            <section id="section2" class="parallax__item">
                <span class="parallax__item__num">02</span>
                <h2 class="parallax__item__title">section2</h2>
                <figure class="parallax__item__imgWrap">
                    <div class="parallax__item__img"></div>
                </figure>
                <p class="parallax__item__desc split">결과도 중요하지만, 과정을 더 중요하게 생각한다.</p>
            </section>
            <!-- //section2 -->

            <section id="section3" class="parallax__item">
                <span class="parallax__item__num">03</span>
                <h2 class="parallax__item__title">section3</h2>
                <figure class="parallax__item__imgWrap">
                    <div class="parallax__item__img"></div>
                </figure>
                <p class="parallax__item__desc split">매 순간에 최선을 다하고, 끊임없이 변화한다.</p>
            </section>
            <!-- //section3 -->

            <section id="section4" class="parallax__item">
                <span class="parallax__item__num">04</span>
                <h2 class="parallax__item__title">section4</h2>
                <figure class="parallax__item__imgWrap">
                    <div class="parallax__item__img"></div>
                </figure>
                <p class="parallax__item__desc split">모든 일에는 기본을 중요하게 생각한다.</p>
            </section>
            <!-- //section4 -->

            <section id="section5" class="parallax__item">
                <span class="parallax__item__num">05</span>
                <h2 class="parallax__item__title">section5</h2>
                <figure class="parallax__item__imgWrap">
                    <div class="parallax__item__img"></div>
                </figure>
                <p class="parallax__item__desc split">열정을 잃지 않고 실패에서 실패로 걸어가는 것이 성공이다.</p>
            </section>
            <!-- //section5 -->

            <section id="section6" class="parallax__item">
                <span class="parallax__item__num">06</span>
                <h2 class="parallax__item__title">section6</h2>
                <figure class="parallax__item__imgWrap">
                    <div class="parallax__item__img"></div>
                </figure>
                <p class="parallax__item__desc split">천 마디 말보단 하나의 행동이 더 값지다.</p>
            </section>
            <!-- //section6 -->

            <section id="section7" class="parallax__item">
                <span class="parallax__item__num">07</span>
                <h2 class="parallax__item__title">section7</h2>
                <figure class="parallax__item__imgWrap">
                    <div class="parallax__item__img"></div>
                </figure>
                <p class="parallax__item__desc split">조그만 성공에 만족하지 않으며, 방심을 경계한다.</p>
            </section>
            <!-- //section7 -->

            <section id="section8" class="parallax__item">
                <span class="parallax__item__num">08</span>
                <h2 class="parallax__item__title">section8</h2>
                <figure class="parallax__item__imgWrap">
                    <div class="parallax__item__img"></div>
                </figure>
                <p class="parallax__item__desc split">나는 내가 더 노력할수록 운이 더 좋아진다는 걸 발견했다.</p>
            </section>
            <!-- //section8 -->

            <section id="section9" class="parallax__item">
                <span class="parallax__item__num">09</span>
                <h2 class="parallax__item__title">section9</h2>
                <figure class="parallax__item__imgWrap">
                    <div class="parallax__item__img"></div>
                </figure>
                <p class="parallax__item__desc split">꿈이 있다면, 그 꿈을 잡고 절대 놓아주지마라.</p>
            </section>
            <!-- //section9 -->
        </main>

기본적인 세팅이 끝났습니다. 이제 css를 설정하도록 하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

@font-face {
            font-family: "gmarket";
            font-weight: 300;
            font-style: normal;
            src:
                url("assets/fonts/hallymGothic-Medium.woff") format("woff"),
                url("assets/fonts/hallymGothic-Medium.woff2") format("woff2");
            font-display: swap;
        }

        body {
            background-color: #111;
        }

        .header__inner a {
            color: #fff;
        }

        /* parallax__cont */
        #parallax__cont {
            max-width: 1600px;
            width: 98%;
            margin: 0 auto;
            /* background-color: rgba(255,255,255,0.1); */
            font-family: 'hallymGothic-Medium';
        }

        .parallax__item {
            width: 1000px;
            max-width: 70vw;
            margin: 30vw auto;
            /* background-color: rgba(255,255,255,0.3); */
            text-align: left;
            margin-right: 0;
            position: relative;
            padding-top: 15vw;
        }

        .parallax__item:nth-child(even) {
            margin-left: 0;
            text-align: right;
        }

        .parallax__item__num {
            font-size: 35vw;
            position: absolute;
            left: -5vw;
            top: -13vw;
            opacity: 0.07;
            font-family: "hallymGothic-Medium";
            font-weight: 100;
        }

        .parallax__item:nth-child(even) .parallax__item__num {
            left: auto;
            right: -5vw;
        }

        .parallax__item__title {
            padding-bottom: 5px;
            font-weight: 400;
            color: #fff;
        }

        .parallax__item__imgWrap {
            width: 100%;
            padding-bottom: 56.25%;
            background: #000;
            position: relative;
            overflow: hidden;
        }

        .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(https://webstoryboy.github.io/gsap2023/assets/img/images01@2.jpg);
        }

        #section2 .parallax__item__img {
            background-image: url(https://webstoryboy.github.io/gsap2023/assets/img/images02@2.jpg);
        }

        #section3 .parallax__item__img {
            background-image: url(https://webstoryboy.github.io/gsap2023/assets/img/images03@2.jpg);
        }

        #section4 .parallax__item__img {
            background-image: url(https://webstoryboy.github.io/gsap2023/assets/img/images04@2.jpg);
        }

        #section5 .parallax__item__img {
            background-image: url(https://webstoryboy.github.io/gsap2023/assets/img/images05@2.jpg);
        }

        #section6 .parallax__item__img {
            background-image: url(https://webstoryboy.github.io/gsap2023/assets/img/images06@2.jpg);
        }

        #section7 .parallax__item__img {
            background-image: url(https://webstoryboy.github.io/gsap2023/assets/img/images07@2.jpg);
        }

        #section8 .parallax__item__img {
            background-image: url(https://webstoryboy.github.io/gsap2023/assets/img/images08@2.jpg);
        }

        #section9 .parallax__item__img {
            background-image: url(https://webstoryboy.github.io/gsap2023/assets/img/images09@2.jpg);
        }

        .parallax__item__desc {
            font-size: 4vw;
            line-height: 1.4;
            margin-top: -0;
            margin-left: -4vw;
            z-index: 100;
            position: relative;
            word-break: keep-all;
            color: #fff;
        }

        .parallax__item:nth-child(even) .parallax__item__desc {
            margin-left: auto;
            margin-right: -4vw;
        }

        .parallax__item__num {
            color: #fff;
        }

        .split>span {
            display: inline-block;
            min-width: 1vw;
        }

이렇게 기본적인 세팅이 끝났습니다.
이제 본격적으로 script를 코딩하도록 하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<script src="https://unpkg.com/split-type"></script>
    <script>
        const targets = gsap.utils.toArray(".split");

        targets.forEach((target) => {
            let SplitClient = new SplitType(target, { type: "lines, words, chars" });
            let lines = SplitClient.lines;
            let words = SplitClient.words;
            let chars = SplitClient.chars;

            gsap.from(chars, {
                yPercent: 100,
                autoAlpha: 0,
                duration: 1,
                ease: "circ.out",
                stagger: {
                    amount: 1,
                    from: "random"
                },
                scrollTrigger: {
                    trigger: target,
                    start: "top center",
                    end: "+=200",
                    markers: true,
                    scrub: 1
                }

            })
        })

해당 코드를 보면 글자를 라인별로 자를것인지 문단별로 자를것인지 글자 하나씩 나눌 것인지 나타내고 있습니다.!!

이렇게 하면 좀 더 멋진 효과를 경험 하실 수 있을것입니다.

다음시간에 계속…

image

PARALAX, 자바스크립트, 이펙터
이펙터
This post is licensed under CC BY 4.0 by the author.