패럴랙스 이펙트 - 리빌 효과

패럴랙스 효과

패럴랙스 이펙트 - 리빌 효과

글씨위에 가상변수로 덮어씌어서 글씨가 리빌하는 효과를 만들어보겠습니다.

---

결과

원본 소스 보기 원본 사이트 보기

---

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 reveal">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc reveal" data-delay="500"><span>산다는것 그것은 치열한 전투이다.</span></p>
        </section>
        <!-- //section1 -->

        <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" data-delay="500"><span>하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다.</span></p>
        </section>
        <!-- //section2 -->

        <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">내일은 내일의 태양이 뜬다.</p>
        </section>
        <!-- //section3 -->

        <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="500">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc reveal">배고픈 자 밥솥을 열어라.</p>
        </section>
        <!-- //section4 -->

        <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">그대 자신의 영혼을 탐구하라.</p>
        </section>
        <!-- //section5 -->

        <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">돈이 없는 것은 죄다.</p>
        </section>
        <!-- //section6 -->

        <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">무전 유죄, 유전 무죄</p>
        </section>
        <!-- //section7 -->

        <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-BTT">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc reveal">내 주머니의 푼돈이 남 주머니에 있는 거금보다 낫다.</p>
        </section>
        <!-- //section8 -->

        <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-TTB">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc reveal">최고에 도달하려면 최저에서 시작하라.</p>
        </section>
        <!-- //section9 -->
    </div>
</main>

CSS 작성

reveal 클래스에 show가 붙으면 애니메이션 효과를 넣어주었습니다.

결과

/* 07 Option */
.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: #ccc;
    z-index: 1;
}
.reveal.reveal-TWO::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 1;
    background: #333;
}

/* 1개 */
.reveal.show::before {
    animation: reveal 1s;
}
.reveal.reveal-RTL.show::before {
    animation: revealRTL 1s;
}
.reveal.reveal-TTB.show::before {
    animation: revealTTB 1s;
}
.reveal.reveal-BTT.show::before {
    animation: revealBTT 1s;
}

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

@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 revealRTL {
    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 revealTTB {
    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 revealBTT {
    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;}
}

JS 작성

늘 만들던 대로 리빌 클래스에 스크롤값이 어느정도 가운데로 들어오면 show가 붙도록 CSS가 되도록 만들었습니다. revealText foreach문은 reveal문을 가지고있는데 아래쪽에 텍스트가 있다면 span을 감싸도록 만들었습니다.

const revealText = document.querySelectorAll(".reveal");
// console.log(revealText)


// 2022-10-06
revealText.forEach((el)=>{
    let splitText = el.innerText;

    // console.log(splitText)
    if(splitText){
        el.innerHTML = '<span>' + splitText + '</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/2){
        //     el.classList.add("show");
        // }

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

    requestAnimationFrame(scroll);
}
scroll();