parallaxEffect07

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

스크롤 하면서 가려져있던 사진과 글이 보이는 효과

원본 소스 보기

원본 사이트

---

html

효과를 부여하기 위해서, 효과가 나타나기를 원하는 content__item__imgWrap, content__item__desc에 reveal클래스를 부여합니다.

코드보기

<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">얕은 사람은 행운을 믿으며, 강한 사람은 원인과 결과를 믿는다.</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 reveal-RTL" data-delay="500">지난 일은 어쩔 수 없는 바 슬퍼한들 이미 엎질러진
                물이다.</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 reveal-TTB" data-delay="500">행동하는 사람처럼 생각하고, 생각하는 사람처럼
                행동하라.</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="1500">
                <div class="content__item__img"></div>
            </figure>

            <p class="content__item__desc reveal reveal-BTT">실수할 자유가 없는 자유란 가치가 없다.</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 reveal-TWO">끝까지 해보기 전까지는 늘 불가능해 보입니다.</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 reveal-TWO reveal-RTL">고통은 잠깐이다. 포기는 영원히 남는다.</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 reveal-TWO reveal-TTB">희망을 품지 않은 자는 절망도 할 수 없다.</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 reveal-TWO reveal-BTT">뭔가를 위해 시도조차하려는 용기가 없다면 삶이 무슨 의미가
                있을까?</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">
                <div class="content__item__img"></div>
            </figure>

            <p class="content__item__desc reveal">꿈을 꾸세요. 그러면 그 꿈이 당신을 만들 것입니다.</p>
        </section>
        <!-- // section9 -->
    </div>
</main>

css

reveal이 부여되었을 때에 동작할 애니메이션을 만들어줍니다.

코드보기

/* parallax */
/* parallax__nav */
#parallax__nav {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.4);
    padding: 20px 30px;
    border-radius: 50px;
    transition: top 0.4s ease;
}

#parallax__nav li {
    display: inline;
    margin: 0 5px;
}

#parallax__nav li a {
    display: inline-block;
    height: 30px;
    padding: 5px 20px;
    text-align: center;
    line-height: 30px;
}

#parallax__nav li.active a {
    background: #fff;
    color: #000;
    border-radius: 20px;
    box-sizing: content-box;
}

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

.content__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: 8vw;
}

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

.content__item__num {
    font-size: 35vw;
    font-weight: 100;
    font-family: 'Lato';
    position: absolute;
    left: -5vw;
    top: -16vw;
    opacity: 0.07;
    z-index: -2;
}

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

.content__item__title {
    font-weight: 400;
    text-transform: capitalize;
}

.content__item__imgWrap {
    width: 100%;
    padding-bottom: 56.25%;
    position: relative;
    overflow: hidden;
    z-index: -1;
}

.content__item__img {
    position: absolute;
    background: url(../assets/img/effect_bg19-min.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 110%;
    height: 110%;
    left: -5%;
    top: -5%;
    filter: saturate(0%);
    /* transition: all 1s; */
}

.content__item:nth-child(1) .content__item__img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../assets/img/effect_bg20-min.jpg);
}

.content__item:nth-child(2) .content__item__img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../assets/img/effect_bg19-min.jpg);
}

.content__item:nth-child(3) .content__item__img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../assets/img/effect_bg18-min.jpg);
}

.content__item:nth-child(4) .content__item__img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../assets/img/effect_bg17-min.jpg);
}

.content__item:nth-child(5) .content__item__img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../assets/img/effect_bg16-min.jpg);
}

.content__item:nth-child(6) .content__item__img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../assets/img/effect_bg11-min.jpg);
}

.content__item:nth-child(7) .content__item__img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../assets/img/effect_bg14-min.jpg);
}

.content__item:nth-child(8) .content__item__img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../assets/img/effect_bg13-min.jpg);
}

.content__item:nth-child(9) .content__item__img {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../assets/img/effect_bg12-min.jpg);
}

.content__item__desc {
    font-size: 4vw;
    line-height: 1.4;
    margin-top: -5vw;
    margin-left: -4vw;
    word-break: keep-all;
}

.content__item:nth-child(even) .content__item__desc {
    /* 2n도 가능 */
    margin-left: auto;
    margin-right: -4vw;
}

#parallax__info {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    padding: 20px;
    border-radius: 10px;
}

#parallax__info li,
.scroll {
    line-height: 1.4;
}

@media (max-width: 800px) {
    #parallax__cont {
        margin-top: 70vw;
    }

    #parallax__nav {
        padding: 10px;
        right: auto;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        border-radius: 5px;
        background-color: rgba(0, 0, 0, 0.8);
    }

    #parallax__nav li {
        display: block;
        margin: 5px;
    }

    #parallax__nav li a {
        font-size: 14px;
        padding: 5px;
        border-radius: 5px;
        height: auto;
        line-height: 1;
    }

    #parallax__nav li.active a {
        border-radius: 5px;
    }

    #parallax__info {
        left: 10px;
        bottom: 10px;
    }
}

/* 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: rgb(43, 43, 43);
    z-index: 1;
}

.reveal.reveal-TWO::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: rgb(20, 20, 20);
    z-index: 1;
}

/* 1개 */
.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;
}

@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;
    }
}

js

p태그 내에 reveal이 부여된 글들을 span으로 묶을 것입니다. reveal이 부여된 것을 querySelectorAll로 모두 찾아서 forEach로 진행을 합니다. splitText에 텍스트를 저장하고, 텍스트를 span으로 묶어줍니다. 스크롤에대한 이벤트를 만듭니다. revealDelay는 각 html에 부여된 dataset-delay의 값입니다. 없는경우 undefined 보여주고, 그렇지않은 경우에는 정해진 딜레이에맞게 show.

const reveal = document.querySelectorAll(".reveal");
reveal.forEach((el) => {
    let splitText = el.innerText;
    if (splitText) {
        el.innerHTML = "<span>" + splitText + "</span>";
    }
});

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

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

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

    document.querySelector(".scroll span").innerText = Math.round(scrollTop);
    requestAnimationFrame(scroll);
}
scroll();