section1

미래는 현재 우리가 무엇을 하는가에 달려 있다.

section2

어제로 돌아갈 수 없다. 왜냐하면 나는 어제와는 다른 사람이 되었기 때문이다.

section3

언제나 현재에 집중할수 있다면 행복할것이다.

section4

먼저 핀 꽃은 먼저진다 남보다 먼저 공을 세우려고 조급히 서둘것이 아니다.

section5

좋은 성과를 얻으려면 한 걸음 한 걸음이 힘차고 충실하지 않으면 안 된다.

section6

성공의 비결은 단 한 가지, 잘할 수 있는 일에 광적으로 집중하는 것이다.

section7

꿈을 계속 간직하고 있으면 반드시 실현할 때가 온다.

section8

흔히 사람들은 기회를 기다리고 있지만 기회는 기다리는 사람에게 잡히지 않는 법이다.

section9

이미끝나버린 일을 후회하기 보다는 하고 싶었던 일들을 하지못한 것을 후회하라.

Source

JAVASCRIPT

HTML

CSS

//재귀함수 : 자기 자신을 한 번 더 실행. 즉 무한대로 실행시킨다. 이 때 그냥 실행시킬 경우 웹이 다운될 수 있다.
function scroll(){
  //스크롤 탑 값 구하기
  let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY;

  document.querySelectorAll(".content__item").forEach(item => {
    //innerHeight값을 빼서 반을 나눠주면 show를 더 빠르게 나오게 함.
    if(scrollTop > item.offsetTop - window.innerHeight/2){
      item.classList.add("show");
    }
  });
  //부드러운 움직임을 1초에 60번 실행시킨다. 이렇게 실행시킬 경우 메모리를 적게 차지하여 웹이 다운되지 않는다. 
  //1초에 60번 실행시키므로 무한 반복이 되지 않는다.
  requestAnimationFrame(scroll);
}
scroll();

<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 -->

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

.content__item {
  width: 1000px;
  max-width: 70vw;
  margin: 30vw auto;
  /* background-color: rgba(255,255,255,0.1); */
  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;
  }
}