패럴랙스 이펙트(7) 만들어보자!

오늘은 패럴랙스 이펙트 중 리빌 효과를 만들어보겠습니당!

패럴랙스 이펙트 (7)

구조

<main id="main">
    <div class="parallax__wrap">
        <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 reveal">
                <div class="parallax__item__img"></div>
            </figure>
            <p class="parallax__item__desc reveal">꿈이 있으면 잡아야 하고 절대 놓지 말아야 한다.</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 reveal reveal-RTL">
                <div class="parallax__item__img"></div>
            </figure>
            <p class="parallax__item__desc reveal reveal-RTL">불가능은 오직 의지가 없는 사람에게만 존재한다.</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 reveal reveal-TTB">
                <div class="parallax__item__img"></div>
            </figure>
            <p class="parallax__item__desc reveal reveal-TTB">불행한 사람은 다른 사람의 불행에서 위안을 얻는다.</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 reveal reveal-BTT">
                <div class="parallax__item__img"></div>
            </figure>
            <p class="parallax__item__desc reveal reveal-BTT">사랑이 없는 삶은 꽃도 열매도 없는 나무와 같다.</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 reveal reveal-TWO">
                <div class="parallax__item__img"></div>
            </figure>
            <p class="parallax__item__desc reveal reveal-TWO" data-delay="1500">무엇이든 사랑하는 방법은 잃어버릴 수 있다는 것을 깨닫는 것입니다.</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 reveal reveal-TWO reveal-RTL">
                <div class="parallax__item__img"></div>
            </figure>
            <p class="parallax__item__desc reveal reveal reveal-TWO reveal-RTL" data-delay="1500">성공을 얻기 위해 무엇을 포기해야 했는지에 따라 성공을 판단해라.</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 reveal reveal-TWO reveal-TTB">
                <div class="parallax__item__img"></div>
            </figure>
            <p class="parallax__item__desc reveal reveal-TWO reveal-TTB" data-delay="1500">아름다움은 자신을 결정하는 순간부터 시작된다.</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 reveal reveal-TWO reveal-BTT">
                <div class="parallax__item__img"></div>
            </figure>
            <p class="parallax__item__desc reveal reveal-TWO reveal-BTT" data-delay="1500">진짜 어려움은 자신에 대해 생각하는 방식을 극복하는 것입니다.</p>
        </section>
        <!-- //section9 -->
    </div>
</main>

스크립트

document.querySelectorAll("p.reveal").forEach(el => {
    el.innerHTML = `<span>${el.innerHTML}</span>`;
})


function scroll(){
    let scrollTop = window.scrollY || window.pageYOffset;

    const reveals = document.querySelectorAll(".reveal");

    reveals.forEach(reveal => {
        let revealOffset = reveal.offsetTop + reveal.parentElement.offsetTop;
        let revealDelay = reveal.dataset.delay;

        if(scrollTop >= revealOffset - window.innerHeight){
            if(revealDelay == undefined){
                reveal.classList.add("show");
            } else {
                setTimeout(() => {
                    reveal.classList.add("show");
                },revealDelay)
            }
        }


        // if(scrollTop >= revealOffset - window.innerHeight){
        //     reveal.classList.add("show");
        // }
    });
    document.querySelector(".scroll span").innerText = Math.round(scrollTop);
    requestAnimationFrame(scroll);
}
scroll();

위의 코드는 reveal 클래스를 가진 <p> 요소를 찾아서 각 요소의 내용을 <span>으로 감싸는 기능과 스크롤 이벤트를 처리하는 함수인 scroll 함수가 포함된 JavaScript 코드입니다.

reveal 클래스를 추가하면 자식 요소에 <span>으로 감싸는 기능이 추가됩니다. 현재 코드에서는 이미 reveal 클래스를 가진 <p> 요소에 대해 <span>을 추가하는 기능이 구현되어 있습니다.

만약 reveal 클래스를 추가하고 싶다면, HTML 문서에서 해당 클래스를 가진 요소를 찾아 추가하면 됩니다. 예를 들어, 아래와 같이 <p> 요소에 reveal 클래스를 추가할 수 있습니다.

그러면 JavaScript 코드에서 querySelectorAll로 reveal 클래스를 가진 요소를 선택하여 각 요소의 내용을 <span>으로 감싸줍니다.

결과적으로, reveal 클래스를 가진 <p> 요소들은 자식 요소로 <span>을 포함하게 됩니다.

 

완성된 페이지와 코드보기

 

 

코드보기