[EFFECT] 페럴렉스 효과 04 : 나타내기 효과

🖱 페럴렉스 효과 : 스크롤을 내릴 때 요소 나타내기🖱

페럴랙스(parallax) 시차란 의미로 사용자가 스크롤링을 할 때 배경과 요소마다 속도 및 크기의 차이를 주어 입체적으로 느껴지게 하는 효과를 말합니다.
이번 시간에는 스크롤을 내릴 때 각 섹션의 요소들이 개별적으로 에니메이션 동작을 하도록 실습해보겠습니다~!🤩

---

#1. HTML / CSS 설정하기

✏️ HTML 보기

<nav id="parallax__nav" class="show">
    <ul>
      <li class="active"><a href="#section1">메뉴1</a></li>
      <li><a href="#section2">메뉴2</a></li>
      <li><a href="#section3">메뉴3</a></li>
      <li><a href="#section4">메뉴4</a></li>
      <li><a href="#section5">메뉴5</a></li>
      <li><a href="#section6">메뉴6</a></li>
      <li><a href="#section7">메뉴7</a></li>
      <li><a href="#section8">메뉴8</a></li>
      <li><a href="#section9">메뉴9</a></li>
    </ul>
</nav>
<!-- //parallax__nav -->

<main id="parallax__cont">
    <div id="contents">
      <section id="section1" class="content__item">
        <span class="content__item__num">01</span>
        <h1 class="content__item__title">section1</h1>
        <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>
        <h1 class="content__item__title">section2</h1>
        <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>
        <h1 class="content__item__title">section3</h1>
        <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>
        <h1 class="content__item__title">section4</h1>
        <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>
        <h1 class="content__item__title">section5</h1>
        <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>
        <h1 class="content__item__title">section6</h1>
        <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>
        <h1 class="content__item__title">section7</h1>
        <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>
        <h1 class="content__item__title">section8</h1>
        <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>
        <h1 class="content__item__title">section9</h1>
        <figure class="content__item__imgWrap">
          <div class="content__item__img"></div>
        </figure>
        <p class="content__item__desc">
          이미끝나버린 일을 후회하기 보다는 하고 싶었던 일들을 하지못한 것을
          후회하라.
        </p>
      </section>
      <!-- //section9 -->
    </div>
</main>
<!-- //main -->

html은 메뉴, 각 섹션, 섹션에 들어갈 콘텐츠와 요소 등을 기준으로 자유롭게 마크업 해주시면 됩니다.

✏️ CSS 보기

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

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

#parallax__nav li a {
    display: inline-block;
    /* width: 30px; */
    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;
}

.content__item {
    width: 1000px;
    max-width: 70vw;
    margin: 30vw auto;
    text-align: left;
    margin-right: 0;
    position: relative;
    padding-top: 10vw;
}

.content__item:nth-child(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;
}
.content__item__title {
    font-weight: 400;
    text-transform: capitalize; /* 첫글자만 대문자 */
}
.content__item__imgWrap {
    width: 100%;
    padding-bottom: 56.25%;
    background: #000;
    position: relative;
    overflow: hidden;
    z-index: -1;
}
.content__item__img {
    position: absolute;
    width: 110%;
    height: 110%;
    left: -5px;
    top: -5px;
    background-image: url(../assets/img/city_bg02.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    filter: saturate(0%);
    transition: all 1s;
}

/* 섹션 이미지 */
.content__item:nth-child(2) .content__item__img {
    background-image: url(../assets/img/city_bg03.jpg);
}
.content__item:nth-child(3) .content__item__img {
    background-image: url(../assets/img/city_bg04.jpg);
}
.content__item:nth-child(4) .content__item__img {
    background-image: url(../assets/img/city_bg05.jpg);
}
.content__item:nth-child(5) .content__item__img {
    background-image: url(../assets/img/Mountian_bg01.jpg);
}
.content__item:nth-child(6) .content__item__img {
    background-image: url(../assets/img/Mountian_bg02.jpg);
}
.content__item:nth-child(7) .content__item__img {
    background-image: url(../assets/img/Mountian_bg03.jpg);
}
.content__item:nth-child(8) .content__item__img {
    background-image: url(../assets/img/Mountian_bg04.jpg);
}
.content__item:nth-child(9) .content__item__img {
    background-image: url(../assets/img/Mountian_bg05.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;
}

/* 각 섹션 한 번에 나타내기 */
/* #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(.1,1.01,.78,1.02);
}
#contents > section .content__item__title {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 1s 0.3s cubic-bezier(.1,1.01,.78,1.02);
}
#contents > section .content__item__imgWrap {
    opacity: 0;
    transform: translateY(200px) rotate(30deg) skew(20deg);
    transition: all 1s 0.6s cubic-bezier(.1,1.01,.78,1.02);
}
#contents > section .content__item__desc {
    opacity: 0;
    transform: translateX(-200px);
    transition: all 1s 0.9s cubic-bezier(.1,1.01,.78,1.02);
}

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


/* 반응형 */
@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;
    }
}

섹션을 콘텐츠 요소 별이 아닌 한 번에 동작하도록 하려면 각 콘텐츠 요소들에게 속성을 부여하지 않고 공통 선택자에게만 속성을 부여하면 됩니다.
반대로 각 콘텐츠 요소별로 움직이게 하고 싶다면 각 콘텐츠 요소마다 에니메이션을 설정해주면 됩니다.

---

#2. JAVASCRIPT : 스크립트로 페럴랙스 효과 주기

먼저 전체적인 흐름을 보고 스크립트가 어떻게 작동되는지 확인해봅시다! 🥹
오늘 스크립트에서 가장 중요한 포인트는 바로 재귀함수를 사용하여 스크립트를 짰다는 것입니다.

📖 재귀함수란?
재귀함수는 함수 안에서 자기 자신을 한 번 더 호출하는 함수를 의미합니다. 자신의 로직을 함수 안에서 반복하다가 일정 조건을 만족하면 함수 밖으로 나와 실행을 멈춥니다.
마지막 실행 조건을 설정하지 않은 경우 함수는 자기 자신을 무한대로 반복을 하게 되며 서버가 다운되기도 하니 꼭 조건을 설정해주어야 한다.

💡 전체 스크립트 보기

//재귀함수 : 자기 자신을 한 번 더 실행. 즉 무한대로 실행시킨다. 이 때 그냥 실행시킬 경우 웹이 다운될 수 있다.
function scroll(){
    //반복문에 사용할 현재 스크롤 위치 값을 구하여 변수에 저장하기
    //세가지를 한 번에 작성한 이유는 호환성 문제로 인한 오류를 막기 위해서 이다. (앞의 값이 작동하지 않으면 뒤의 값으로 불러오기)
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;

    //01
    //모든 섹션을 선택한 후 forEach문으로 반복시키기
    document.querySelectorAll(".content__item").forEach(item =< {
    
    //02    
    //현재 스크롤 값이 각 섹션의 offsetTop값 - window.innerHeight(사용자 화면에서 보이는 브라우저 영역) 값의 반 = 현재 보이는 브라우저의 반 높이의 이전 스크롤 값을 구할 수 있다.
    //즉 해당 섹션 스크롤 값에 도달하기 전에 그 이전 스크롤 값에서 에니메이션을 실행시키도록 하여 섹션 스크롤값에 도달 했을 때 완전한 섹션 콘텐츠를 확인할 수 있도록 한다.
    if(scrollTop > item.offsetTop - window.innerHeight/2){
        item.classList.add("show");
    }
    });
    //03
    //requestAnimationFrame() == 스크롤 이벤트 발생시키는 메서드 즉 스크립트에서 애니메이션을 구현할 때 자주 사용
    //requestAnimationFrame()은 브라우저에 최적화된 메서드이며 적절한 프레임 속도를 실행시킨다.(기본 1초 60프레임) 때문에 스크롤 이동 시 부드럽고 가벼운 움직임을 준다. 
    requestAnimationFrame(scroll);
}
scroll();
//이렇게 조건(메서드)을 설정한 후 실행시킬 경우 메모리를 적게 차지하여 웹이 다운되지 않는다. 

1. 모든 섹션을 선택한 후 반복문 만들기
2. 반복문 안에 조건문을 통해 해당 섹션 영역의 반 정도의 이전 영역에 스크롤이 올 경우 에니메이션을 실행시켜 해당 섹션 영역에 스크롤이 올 경우 콘텐츠가 온전히 다 보이도록 설정합니다.
3. requestAnimationFrame()메서드를 통해 scroll 함수가 반복이 되고 마지막 애니메이션이 끝난 경우 반복을 중단하도록 합니다.

---

원본 소스 보기

원본 페이지 보기