패럴랙스 이펙트 - 텍스트 효과

06. 패럴랙스 이펙트 - 텍스트 효과

페럴랙스 효과는 스크롤을 내리면서 알맞은 스크롤의 위치에서 효과가 생기는 것을 말합니다.

javascript

이번 패럴랙스는 글자 하나씩 애니메이션에 딜레이를 줘서 출력되도록 하였습니다.
자바스크립트로 진행하였습니다.

javascript

document.querySelectorAll('.split').forEach((text) => {
    let splitText = text.innerText;
    let splitWrap = splitText.split('').join('</span><span aria-hidden = "true">');
    splitWrap = "<span aria-hidden ='true'>" + splitWrap + "</span>";
    text.innerHTML = splitWrap;
    text.setAttribute("aria-label", splitText);
});
function scroll() {
    let scrollTop = window.scrollY;
    document.querySelector("#parallax__info .scroll").innerText = Math.round(scrollTop);
    // CSS 클래스 추가 (비효율적임)

    document.querySelectorAll(".split span").forEach((item, i) => {

        if (scrollTop >= item.offsetTop -50) {
            item.style.transitionDelay = `${i*50}ms`;
            item.classList.add("show");
        }
    })
    requestAnimationFrame(scroll);
    //첫 번째 span ---> 0.01
    //두 번째 span ---> 0.01
    //세 번째 span ---> 0.01
    //네 번째 span ---> 0.01
    //다 번째 span ---> 0.01
    //여섯 번째 span ---> 0.01
}
scroll();

HTML

html입니다. 각 요소에 클래스를 만들어서 animation 줄 수 있도록 하였습니다.

HTML

<main id="parallax__cont">
    <div id="contents">
        <section id="section1" class="content__item">
            <span class="content__item__num">01</span>
            <h2 class="content__item__title">section1</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc split">결과도 중요하지만, 과정을 더 중요하게 생각한다.</p>
        </section>
        <!-- section01 -->
        <section id="section2" class="content__item">
            <span class="content__item__num">02</span>
            <h2 class="content__item__title">section2</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc split"> 직업에서 행복을 찾아라. 아니면 행복이 무엇인지 절대 모를 것이다</p>
        </section>
        <!-- section02 -->
        <section id="section3" class="content__item">
            <span class="content__item__num">03</span>
            <h2 class="content__item__title">section3</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc split">피할수 없으면 즐겨라 그리고 행동해라</p>
        </section>
        <!-- section03 -->
        <section id="section4" class="content__item">
            <span class="content__item__num">04</span>
            <h2 class="content__item__title">section4</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc split">실패는 잊어라 그러나 그것이 준 교훈은 절대 잊으면 안된다.</p>
        </section>
        <!-- section04 -->
        <section id="section5" class="content__item">
            <span class="content__item__num">05</span>
            <h2 class="content__item__title">section5</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc split">당신이 할수 있다고 믿든 할수 없다고 믿든 믿는 대로 될것이다.</p>
        </section>
        <!-- section05 -->
        <section id="section6" class="content__item">
            <span class="content__item__num">06</span>
            <h2 class="content__item__title">section6</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc split">눈물과 더불어 빵을 먹어 보지 않은 자는 인생의 참다운 맛을 모른다. </p>
        </section>
        <!-- section06 -->
        <section id="section7" class="content__item">
            <span class="content__item__num">07</span>
            <h2 class="content__item__title">section7</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc split">좋은 성과를 얻으려면 한 걸음 한 걸음이 힘차고 충실하지 않으면 안 된다.</p>
        </section>
        <!-- section07 -->
        <section id="section8" class="content__item">
            <span class="content__item__num">08</span>
            <h2 class="content__item__title">section8</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc split">산다는것 그것은 치열한 전투이다.</p>
        </section>
        <!-- section08 -->
        <section id="section9" class="content__item">
            <span class="content__item__num">09</span>
            <h2 class="content__item__title">section9</h2>
            <figure class="content__item__imgWrap">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc split">세상은 과정보다 결과를 중요시한다.</p>
        </section>
        
    </div>
</main>

결과

원본 소스 보기