패럴렉스 - 연속적으로 나타나기

패럴랙스 - 나타나기

페럴랙스 효과는 스크롤을 내리면서 알맞은 스크롤의 위치에서 효과가 생기는 것을 말합니다.

javascript

(scrollTop값은 현재 자신의 스크롤 위치) scrollTop 속성을 이용해서 자신이 보고있는 window환경에서의 위치를 구합니다.
content__item의 클래스가 들어있는 요소의 위치를 forEach문을 사용해서 탐색하고 조건문을 사용하여
제가 원하는 위치에서 동작하기 원하는 위치에서 show라는 class를 추가해주는 메서드를 사용합니다.
내가 있는 위치를 계속 탐색해야하기 떄문에 재귀함수를 사용하여 실행하였습니다. 하지만 너무많이 탐색하면
메모리에 과부하가 올 수 있기 떄문에 requestAnimationFrame 메서드를 사용하여 1분에 60번만 하도록 제한하였습니다.

javascript

 // 재귀함수 : 자기자신을 계속해서 실행해준다.
function scroll () {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.screenY;
    document.querySelectorAll(".content__item").forEach(item => {
        if(scrollTop > item.offsetTop - window.innerHeight/2) { //scrollTop값은 브라우저나 화면의 크기 등 위치의 오차가 있을 수 있기 떄문에 조절해주어야 합니다.
            item.classList.add("show")
        }
    });
    requestAnimationFrame(scroll) //1분에 60번씩만 실행해주는 메서드 메모리를 아낄 수 있다.
}
scroll();

HTML

html입니다. 각 요소에 클래스를 만들어서 animation 줄 수 있도록 하였습니다.

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>
    <!-- section01 -->
    <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>
    <!-- section02 -->
    <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>
    <!-- section03 -->
    <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>
    <!-- section04 -->
    <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>
    <!-- section05 -->
    <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>
    <!-- section06 -->
    <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>
    <!-- section07 -->
    <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>
    <!-- section08 -->
    <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>
    <!-- section09 -->
</div>
</main>

animation

각 요소에 투명도와 회전 움직임을 주어서 애니메이션 효과를 만들었습니다.
javascript에서 scrollTop값을 구해서 해당위치를 구해서 class를 추가해 주었다면 CSS에서 class가 추가 되었을때
회전 투명도 애니메이션 효과를 지정하여 해당위치에 있지않으면 opacity를 0으로하고 위치에 도달하면 1로 바꾸어 보이도록 합니다.
각 요소에 딜레이를 만들어 역동적인 효과를 만들어줍니다.

animation

 #contents > section .content__item__num{
    opacity: 0;
    transform: translateY(200px); /*밑에서 올라오도록 효과를 준다.*/
    transition: all 1s 0.1s cubic-bezier(0, 1.97, 0.58, 1);  /*두번째 초는 딜레이 입니다.*/
}
#contents > section .content__item__title{
    opacity: 0;
    transform: translateX(-100px);
    transition: all 1s 0.2s cubic-bezier(0, 1.97, 0.58, 1);
}
#contents > section .content__item__imgWrap{
    opacity: 0;
    transform: translateY(200px) rotate(30deg) skew(20deg);         /* skew 마름모로 만들어준다 */
    transition: all 1s 0.3s cubic-bezier(0, 1.97, 0.58, 1);
}
#contents > section .content__item__desc{
    opacity: 0;
    transform: translateX(-200px);
    transition: all 1s 0.4s cubic-bezier(0, 1.97, 0.58, 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);
}

결과

원본 소스 보기