페럴럭스이펙트1

section1

결과도 중요하지만, 과정을 더 중요하게 생각한다.

section2

삶이 있는 한 희망은 있다.

section3

산다는것 그것은 치열한 전투이다.

section4

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

section5

피할수 없으면 즐겨라.

section6

내일은 내일의 태양이 뜬다.

section7

1퍼센트의 가능성, 그것이 나의 길이다.

section8

자신을 내보여라. 그러면 재능이 드러날 것이다.

section9

겨울이 오면 봄이 멀지 않으리.

소스보기

Javascript

HTML

CSS

const scroll = document.querySelector("#parallax__info .scroll span");
const infoSpan = document.querySelectorAll(".info span");
const contentItem = document.querySelectorAll(".content__item");
window.addEventListener("scroll", () => {
  let scrollTop = document.documentElement.scrollTop || window.pageYOffset || window.scrollY;
  scroll.innerText = Math.round(scrollTop);
  // nav
  if (scrollTop <= document.getElementById("section1").offsetTop) {
    document.querySelectorAll("#parallax__nav li").forEach((li) => {
      li.classList.remove("active");
    });
  }
  contentItem.forEach((el, i) => {
    if (scrollTop >= document.getElementById(el.getAttribute("id")).offsetTop - 2) {
      document.querySelectorAll("#parallax__nav li").forEach((li) => {
        li.classList.remove("active");
      });
      document.querySelector("#parallax__nav li:nth-child(" + (i + 1) + ")").classList.add("active");
    }
  });
  // info
  infoSpan.forEach((el, i) => {
    document.querySelector(".offset" + (i + 1)).innerText = document.getElementById("section" + (i + 1)).offsetTop;
  });
});
// 스크롤 이동
document.querySelectorAll("#parallax__nav li a").forEach((li) => {
  li.addEventListener("click", (e) => {
    e.preventDefault();
    document.querySelector(li.getAttribute("href")).scrollIntoView({ behavior: "smooth" });
  });
});

<header id="header">
  <h1>Javascript Mouse Effect01</h1>
  <p>페럴럭스 이펙트</p>
  <ul>
    <li class="active"><a href="mouseEffect01.html">1</a></li>
    <li><a href="parallaxEffect01.html">2</a></li>
    <li><a href="parallaxEffect02.html">3</a></li>
    <li><a href="parallaxEffect03.html">4</a></li>
    <li><a href="parallaxEffect04.html">5</a></li>
    <li><a href="parallaxEffect05.html">6</a></li>
    <li><a href="parallaxEffect06.html">7</a></li>
  </ul>
</header>
<!-- //header -->
<nav id="parallax__nav">
  <ul>
    <li><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">
  <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">1퍼센트의 가능성, 그것이 나의 길이다.</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 -->
</main>
<!-- // main -->
<aside id="parallax__info">
  <div class="scroll">scrollTop : <span>0</span>px</div>
  <div class="info">
    <ul>
      <li>#section1 offset() : <span class="offset1">0</span></li>
      <li>#section2 offset() : <span class="offset2">0</span></li>
      <li>#section3 offset() : <span class="offset3">0</span></li>
      <li>#section4 offset() : <span class="offset4">0</span></li>
      <li>#section5 offset() : <span class="offset5">0</span></li>
      <li>#section6 offset() : <span class="offset6">0</span></li>
      <li>#section7 offset() : <span class="offset7">0</span></li>
      <li>#section8 offset() : <span class="offset8">0</span></li>
      <li>#section9 offset() : <span class="offset9">0</span></li>
    </ul>
  </div>
</aside>
<!-- // aside -->

#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;
}
#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;
  color: #fff;
}
#parallax__nav li.active a {
  background-color: #fff;
  color: #000;
  border-radius: 20px;
  box-sizing: content-box;
}
#parallax__cont {
  max-width: 1600px;
  width: 98%;
  margin: 0 auto;
  /* background-color: rgba(0, 0, 0, 0.4); */
}
.content__item {
  width: 1000px;
  max-width: 70vw;
  margin: 30vw auto;
  /* background-color: rgba(255, 255, 255, 0.5); */
  text-align: left;
  margin-right: 0;
  padding-top: 15vw;
  position: relative;
}
.content__item:nth-child(even) {
  margin-left: 0;
  text-align: right;
}
.content__item__num {
  font-size: 35vw;
  font-family: "Lato";
  font-weight: 100;
  left: -5vw;
  top: -8vw;
  opacity: 0.7;
  position: absolute;
  z-index: -2;
}
.content__item:nth-child(even) .content__item__num {
  left: auto;
  right: -5vw;
}
.content__item__title {
  font-weight: 400;
  text-transform: capitalize;
}
.content__item__imgWrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: #000;
  overflow: hidden;
  z-index: -1;
}
.content__item__img {
  position: absolute;
  background: url(../assets/img/effect_bg11.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  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/img/effect_bg12.jpg);
}
.content__item:nth-child(2) .content__item__img {
  background-image: url(../assets/img/effect_bg13.jpg);
}
.content__item:nth-child(3) .content__item__img {
  background-image: url(../assets/img/effect_bg14.jpg);
}
.content__item:nth-child(4) .content__item__img {
  background-image: url(../assets/img/effect_bg15.jpg);
}
.content__item:nth-child(5) .content__item__img {
  background-image: url(../assets/img/effect_bg16.jpg);
}
.content__item:nth-child(6) .content__item__img {
  background-image: url(../assets/img/effect_bg17.jpg);
}
.content__item:nth-child(7) .content__item__img {
  background-image: url(../assets/img/effect_bg18.jpg);
}
.content__item:nth-child(8) .content__item__img {
  background-image: url(../assets/img/effect_bg19.jpg);
}
.content__item:nth-child(9) .content__item__img {
  background-image: url(../assets/img/effect_bg20.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;
}
#parallax__info {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 20px;
  border-radius: 10px;
}
#parallax__info .info li,
.scrollTop {
  line-height: 1.4;
}
@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: normal;
  }
  #parallax__nav li.active a {
    border-radius: 5px;
  }
  #parallax__info {
    bottom: 10px;
    left: 10px;
  }
}