패럴렉스 이펙트_07 : 각 문장에 딜레이를 걸어 효과주기 🐢

패럴렉스 이펙트_07

각 span태그가 감싸여있지 않은 문장들을 span태그로 감싸 각 이미지와 span태그에 after/before 요소를 통해 효과를 주도록 해보겠습니다 👩🏻‍💻

---

HTML 코드

HTML 코드는 크게 신경쓸것이 없으나,
각 desc에 data-delay를 추가시켜 각 애니메이션에 딜레이를 줄겁니다!🏄‍♂️

<main id="parallax__cont">
    <div id="contents">

        <!-- section1 시작 -->
        <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 reveal">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc reveal">우리는 사랑하는 친구들에 의해서만 알려진다.</p>
        </section>
        <!-- section1 끝 -->

        <!-- section2 시작 -->
        <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 reveal reveal-RTL">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc reveal reveal-RTL" data-delay="500">사랑은 눈으로 보지 않고 마음으로 보는 거지.</p>
        </section>
        <!-- section2 끝 -->

        <!-- section3 시작 -->
        <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 reveal reveal-TTB">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc reveal reveal-TTB" data-delay="500">두 분은 상처 하나 입지 않고, 대용사가 된 셈이오.</p>
        </section>
        <!-- section3 끝 -->

        <!-- section4 시작 -->
        <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 reveal reveal-BTT" data-delay="1500">
                <div class="content__item__img" data-delay="1500"></div>
            </figure>
            <p class="content__item__desc reveal reveal-BTT">그의 믿음은 그가 쓰는 모자의 유행처럼 변한다.</p>
        </section>
        <!-- section4 끝 -->

        <!-- section5 시작 -->
        <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 reveal reveal-TWO">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc reveal reveal-TWO">잘 있거라! 우리가 언제 다시 만날지는 아무도 모른다.</p>
        </section>
        <!-- section5 끝 -->

        <!-- section6 시작 -->
        <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 reveal reveal-TWO reveal-RTL">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc reveal reveal-TWO reveal-RTL">죄를 짓고 잘되는 사람도 있고, 덕을 베풀고 망하는 사람도 있다.</p>
        </section>
        <!-- section6 끝 -->

        <!-- section7 시작 -->
        <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 reveal reveal-TWO reveal-TTB">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc reveal reveal-TWO reveal-TTB">모두를 사랑하되, 몇 사람만 믿으라. 누구에게도 잘못을 저지르지 말라.</p>
        </section>
        <!-- section7 끝 -->

        <!-- section8 시작 -->
        <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 reveal reveal-TWO reveal-TTB">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc reveal reveal-TWO reveal-TTB">누구에게나 결점은 있기 마련이지. 그분의 경우는 솔직하다는 게 결점이야.</p>
        </section>
        <!-- section8 끝 -->

        <!-- section9 시작 -->
        <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 reveal reveal-TWO reveal-BTT">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc reveal reveal-TWO reveal-TTB">사람은 누구나 주어진 일과 원하는 것이 있다, 비록 보잘 것 없을 지라도.</p>
        </section>
        <!-- section9 끝 -->
    </div>
</main>

---

CSS 코드 : 애니메이션

총 5가지(opacity/reveal/reveal-RTL/reveal-TTB/reveal-BTT)의 애니메이션을 사용하였습니다.
또한 각각의 애니메이션은 속성을 변경해줌으로써 0%~100%까지의 크기 변경 과정을 보여주도록 하였으며
일부 속성은 기본값을 사용하기 위해 'auto'를 지정해 변경값을 초기화 해주었습니다 👀

@keyframes opacity{
    0%   {opacity: 0;}
    60%  {opacity: 0;}
    70%  {opacity: 1;}
    100% {opacity: 1;}
}

@keyframes reveal{
    0%   {width: 0;    left: 0;}
    50%  {width: 100%; left: 0;}
    80%  {width: 100%; left: 0;}
    100% {width: 0;    left: 100%;}
}

@keyframes reveal-RTL{
    0%   {width: 0;    right: 0; left: auto;}
    50%  {width: 100%; right: 0; left: auto;}
    80%  {width: 100%; right: 0; left: auto;}
    100% {width: 0;    right: 100%; left: auto;}
}

@keyframes reveal-TTB{
    0%   {width: 100%;    height: 0; top: 0;}
    50%  {width: 100%; height: 100%; top: 0;}
    80%  {width: 100%; height: 100%; top: 0;}
    100% {width: 100%;    height: 0; top: 100%;}
}
@keyframes reveal-BTT{
    0%   {width: 100%;    height: 0;    bottom: 0;    top:auto;}
    50%  {width: 100%;    height: 100%; bottom: 0;    top:auto;}
    80%  {width: 100%;    height: 100%; bottom: 0;    top:auto;}
    100% {width: 100%;    height: 0;    bottom: 100%; top:auto;}
}

---

after/before 요소를 움직임으로써 애니메이션을 구성하는것이기 떄문에 하단의 코드가 꼭 필요합니다 🙄

.reveal > div, .reveal > span {
    opacity: 0;
}
.reveal.show > div,.reveal.show > span  {
    animation: opacity 1s linear forwards;
}
.reveal {
    position: relative;
}
.reveal::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.527);
    backdrop-filter: blur(15px);
    z-index: 1;
}
.reveal.reveal-TWO::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.445);
    backdrop-filter: blur(15px);
}

.reveal.show::before{
    animation: reveal 1s;
}
.reveal.reveal-RTL.show::before{
    animation: reveal-RTL 1s;
}
.reveal.reveal-TTB.show::before{
    animation: reveal-TTB 1s;
}
.reveal.reveal-BTT.show::before{
    animation: reveal-BTT 1s;
}

/* 2개 */
.reveal.show::after{
    animation: reveal 1s 0.3s;
}
.reveal.reveal-RTL.show::after{
    animation: reveal-RTL 1s 0.3s;
}
.reveal.reveal-TTB.show::after{
    animation: reveal-TTB 1s 0.3s;
}
.reveal.reveal-BTT.show::after{
    animation: reveal-BTT 1s 0.3s;
}

---

JS 코드 : split 기준으로 한글자씩 span으로 감싸주기!

//reveal이 붙었을때 한문장씩 span태그가 없는 문장들은 span태그를 붙여줍니다.

1. .content__item__desc에 reveal이 붙었을때의 상태만을 다중으로 선택 후 해당 요소를 forEach를 통해 추출합니다.
2. 각 꺼낸 요소를 .innerText로 문자열로 변환 후 splitText라는 변수안에 넣고
3. "<span aria-hidden='true'>" + splitWrap + "</span>";를 통해 splitText 양쪽에 span 태그를 열고 닫는 태그를 넣어줍니다.
5. splitText을 각 뽑아낸 요소에 innerHTML로 넣습니다~

//스크롤시 딜레이를 걸어 show를 붙여주는 원리

0. revealDelay 에는 el.dataset.delay(각 요소의 data-delay여부)를 넣어주고
1. 만약 revealDelay(data-delay 여부)가 찾을 수 없음과 같다면
2. 각 요소에 show 클래스를 붙여주고
3. 만약 찾을 수 있다면 각 요소는 setTimeout에 revealDelay(data-delay 여부)초 만큼 딜레이 후 show를 붙여줍니다.

document.querySelectorAll(".content__item__desc.reveal").forEach(text => {
    let splitText = text.innerHTML;
    splitText = "<span>" + splitText + "</span>";
    text.innerHTML = splitText;
})

//reveal 클래스 자식에 글씨만 있다면, 가상으로 span 태그를 만들어서 넣어주세요
function scroll(){

    let scrollTop = window.scrollY;
    const reveal = document.querySelectorAll(".reveal");
    
    reveal.forEach(el => {
        let revealOffset =  el.offsetTop + el.parentElement.offsetTop;
        let revealDelay = el.dataset.delay;
        
        if(scrollTop >= revealOffset - window.innerHeight){
            if(revealDelay == undefined){
                el.classList.add("show");
            } else {
                setTimeout(() => {
                    el.classList.add("show");
                }, revealDelay)
            }
        }
    })

    requestAnimationFrame(scroll);
}
scroll();

결과

느무느무 믓즈인~~~~~ 패럴렉스 이펙트 07번 완승~~~💃🏻

---

원본 소스 보기

원본 페이지 보기