Parallax Effect04

Parallax Effect04

버튼으로 활용되는 페럴렉스 이펙트 대신 스크롤을 내릴때마다 애니메이션이 보여지는 이펙트 유형을 공부해보았습니다.

01. HTML

이번에는 클릭하여 올라가는 TOP 버튼이나, 메뉴버튼은 사라졌습니다. 보여질때 애니메이션을 활용하는 페럴렉스 이펙트 유형입니다.

💀 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">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc"> 인간은 패배하도록 만들어진 것은 아니다. 인간은 파괴될 지언정 패배할 수는 없다. </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">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc"> 사막이 아름다운 것은, 어디엔가 샘을 숨기고 있기 때문이야 </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">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc"> 성공 그 자체에 파멸의 불씨가 들어 있을지도 모른다 </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">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc"> 삶에 후회를 남기지말고, 사랑하는 데 이유를 달지 마세요 </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">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc"> 우리는 인생의 날들을 늘릴수는 없지만, 그 날들에 생기를 불어 넣을 수는 있다. </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">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc"> 반복되는 하루는 단 한번도 없다. 그러므로 너는 아름답다. </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">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc"> 나는 신념에 가득 찬 자들을 신뢰하지 않습니다. 나는 오히려 의심에 가득 찬 자들을 신뢰합니다.  </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">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc"> 인생에 지나가가는 사람들에게 상처받지 말자 그들은 어차피 인생에서 지나가는 사람들일 뿐이다. </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">
                <div class="content__item__img"></div>
            </figure>
            <p class="content__item__desc"> 네 장미꽃을 그렇게 소중하게 만든 것은 그 꽃을 위해 네가 소비한 시간이란다. </p>
        </section>
        <!-- //section9 -->
    </div>
</main>
<!-- // parallax__cont -->

02. Css

css로 거의 모든 애니메이션을 작성해줍니다.

💀 css 코드

#contents > section .content__item__num {
    opacity: 0;
    transform: translateY(200px);
    transition: all 1s 0.1s cubic-bezier(.29,.33,.13,.85);
}
#contents > section .content__item__title {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 1s 0.3s cubic-bezier(.29,.33,.13,.85);
}
#contents > section .content__item__imgWrap {
    opacity: 0;
    transform: translateY(200px) rotate(30deg) skew(20deg);
    transition: all 1s 0.6s cubic-bezier(.29,.33,.13,.85);
}
#contents > section .content__item__desc {
    opacity: 0;
    transform: translateX(-200px);
    transition: all 1s 0.9s cubic-bezier(.29,.33,.13,.85);
}

#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);
}

03. Javascript

#contents 같은 위치로 스크롤을 내렸을 때, show가 붙는 자바스크립트 입니다.

💀 Javascript 코드

//재귀함수
function scroll(){
    let scrollTop = window.pageYOffset || document.documentURI.scrollTop || window.screenY;

    document.querySelectorAll(".content__item").forEach(item => {
        if(scrollTop > item.offsetTop - window.innerHeight/2){
            item.classList.add("show");
        }
    });
    requestAnimationFrame(scroll); //1분에 60번 출력
}
scroll();

원본 소스 보여주기

원본 사이트 보여주기