패럴렉스 이펙트_04 : 스크롤에 따라 자연스럽게 보여주기!

패럴렉스 이펙트_04 : 스크롤에 따라 자연스럽게 보여줘보기

이번 예제에서는 스크롤 값에 따라 각 요소들을 자연스럽게 페이드 인 해주는 효과를 스크립트와 트랜지션을 통해 구현하러 가~~~보자고~~~~~! 요.

---

HTML 코드 : 예제 구현용

이번 예제는 "content__item" 클래스가 메인이 되는 핵심 요소이니 하단과 같이 잘 작성해줍시다~~

<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">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">우리는 사랑하는 친구들에 의해서만 알려진다. </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">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">사랑은 눈으로 보지 않고 마음으로 보는 거지. </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">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">두 분은 상처 하나 입지 않고, 대용사가 된 셈이오.</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">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">그의 믿음은 그가 쓰는 모자의 유행처럼 변한다.</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">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">잘 있거라! 우리가 언제 다시 만날지는 아무도 모른다.</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">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">죄를 짓고 잘되는 사람도 있고, 덕을 베풀고 망하는 사람도 있다.</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">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">모두를 사랑하되, 몇 사람만 믿으라. 누구에게도 잘못을 저지르지 말라.</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">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">누구에게나 결점은 있기 마련이지. 그분의 경우는 솔직하다는 게 결점이야.</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">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc">사람은 누구나 주어진 일과 원하는 것이 있다, 비록 보잘 것 없을 지라도. </p>
        </section>
        <!-- section9 끝 -->
    </div>
</main>
<!-- //main -->

---

CSS 코드 : 큐빅 베지어를 통한 트랜지션 효과 조절

베지어 곡선은 부드러운 곡선을 모델링하기 위해 컴퓨터 그래픽에서 널리 사용되는 기법인데
스크립트로 content__item 클래스를 가진 요소에 show 클래스가 붙었을때 실행시켜줄 트랜지션 효과를
cubic-bezier(큐빅 베지어)효과로 제어함으로써 고급스러운 효과를 구성해볼게요!

/* 개별적으로 나타나기 */
#contents > section .content__item__num {
    opacity: 0;
    transform: translateY(200px);
    transition: all 1s 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
#contents > section .content__item__title {
    opacity: 0;
    transform: translateY(-100px);
    transition: all 1s 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#contents > section .content__item__imgWrap {
    opacity: 0;
    transform: translateY(200px) rotate(30deg) skew(20deg);
    transition: all 1s 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
#contents > section .content__item__desc {
    opacity: 0;
    transform: translateX(-200px);
    transition: all 1s 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}


#contents > section.show .content__item__num {
    opacity: 0.07;
    transform: translateY(0);
}
#contents > section.show .content__item__title {
    opacity: 1;
    transform: translateX(0);
}
#contents > section.show .content__item__imgWrap {
    opacity: 1;
    transform: translateY(0) rotate(0) skew(0);
}
#contents > section.show .content__item__desc {
    opacity: 1;
    transform: translateX(0);
}
#contents > section:nth-child(even) .content__item__title{
    transform: translateX(100px);
}
#contents > section:nth-child(even).show .content__item__title{
    transform: translateX(0);
}
#contents > section:nth-child(even) .content__item__desc {
    transform: translateX(-200px);
}
#contents > section:nth-child(even)/show .content__item__desc {
    transform: translateX(0);
}

CSS 코드 전체보기

/* 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;
    /* background-color: rgba(255, 255, 255, 0.1); */
    margin: 0 auto;
    width: 98%;
}

.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) {
    /* 2n도 가능하고 even 도 가능하고 */
    margin-left: 0;
    text-align: right;
}

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

.content__item:nth-child(even) .content__item__num {
    right: -5vw;
    left: auto;
    /* left 값 초기화 */
}

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

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

.content__item__img {
    background: url(../../assets/slider/effect_bg_01.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /* 내가 작아서 넣음 */
    position: absolute;
    width: 110%;
    height: 110%;
    left: -5%;
    top: -5%;
    filter: saturate(0%);
    transition: all 1s;
}

.content__item:nth-child(1) .content__item__img {
    background-image: url(../../assets/slider/effect_bg_01.jpg);
}

.content__item:nth-child(2) .content__item__img {
    background-image: url(../../assets/slider/effect_bg_02.jpg);
}

.content__item:nth-child(3) .content__item__img {
    background-image: url(../../assets/slider/effect_bg_03.jpg);
}

.content__item:nth-child(4) .content__item__img {
    background-image: url(../../assets/slider/effect_bg_04.jpg);
}

.content__item:nth-child(5) .content__item__img {
    background-image: url(../../assets/slider/effect_bg_05.jpg);
}

.content__item:nth-child(6) .content__item__img {
    background-image: url(../../assets/slider/effect_bg_06.jpg);
}

.content__item:nth-child(7) .content__item__img {
    background-image: url(../../assets/slider/effect_bg_07.jpg);
}

.content__item:nth-child(8) .content__item__img {
    background-image: url(../../assets/slider/effect_bg_08.jpg);
}

.content__item:nth-child(9) .content__item__img {
    background-image: url(../../assets/slider/effect_bg_09.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 {
    margin-left: auto;
    margin-right: 4vw;
}

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

    #parallax__nav {
        padding: 10px;
        right: auto;
        left: 10px;
        top: 10px;
        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;
    }
}

/* 한번에 나타나기 */
/* #contents > section{
    opacity: 0;
    transition: all 1s;
}
#contents > section.show{
    opacity: 1;
} */

/* 개별적으로 나타나기 */
#contents > section .content__item__num {
    opacity: 0;
    transform: translateY(200px);
    transition: all 1s 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}
#contents > section .content__item__title {
    opacity: 0;
    transform: translateY(-100px);
    transition: all 1s 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#contents > section .content__item__imgWrap {
    opacity: 0;
    transform: translateY(200px) rotate(30deg) skew(20deg);
    transition: all 1s 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
#contents > section .content__item__desc {
    opacity: 0;
    transform: translateX(-200px);
    transition: all 1s 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}


#contents > section.show .content__item__num {
    opacity: 0.07;
    transform: translateY(0);
}
#contents > section.show .content__item__title {
    opacity: 1;
    transform: translateX(0);
}
#contents > section.show .content__item__imgWrap {
    opacity: 1;
    transform: translateY(0) rotate(0) skew(0);
}
#contents > section.show .content__item__desc {
    opacity: 1;
    transform: translateX(0);
}
#contents > section:nth-child(even) .content__item__title{
    transform: translateX(100px);
}
#contents > section:nth-child(even).show .content__item__title{
    transform: translateX(0);
}
#contents > section:nth-child(even) .content__item__desc {
    transform: translateX(-200px);
}
#contents > section:nth-child(even)/show .content__item__desc {
    transform: translateX(0);
}

---

JS 코드 : 스크롤 값에 따라 show 클래스를 붙여주기

패럴렉스의 꽃 자바스크립트에는 스크롤 값에 따라 각 content__item 클래스를 가진 요소에 show클래스를 추가시켜줄겁니다
그래야 상단에서 show 클래스가 붙었을때 설정해둔 css를 작동시킬 수 있으니까요 ㅎ-ㅎ;

requestAnimationFrame 가 이번 예제에서 사용됩니다
본 내장함수를 설정시 [백그라운드 동작 및 비활성화시 중지 가능 / 최대 1초에 60번 동작 / 내부의 동일한 타이머를 참조 가능]와 같은 설정이 적용 가능합니다.

//재귀 함수
    //show를 붙여주기 위한 함수
    function scroll(){
        let scrollTop = window.pageYoffest || document.documentElement.scrollTop || window.screenY;

        //show 클래스를 붙여주기 위한 조건
        //브라우저 높이값 - [각 아이템의 브라우저 내부의 높이값 - [브라우저 내부 높이값 / 2]의 값]
        document.querySelectorAll(".content__item").forEach(item => {
            if(scrollTop > item.offsetTop-window.innerHeight/2){
                item.classList.add("show")
            }
        })
        //스크롤 함수에 내장함수 requestAnimationFrame를 사용
        requestAnimationFrame(scroll);
    }

    //함수 호출
    scroll();

결과

아~~~~~~~ 드디어 끝이 났습니다
블로그에도 적용해볼지는 고민이 되네요 음...

---

원본 소스 보기

원본 페이지 보기