HTML 페이지 Scroll Animation 구현

기본적으로 HTML, CSS, Javascript 세 가지 구성으로 웹 페이지 내에서 스크롤시에 애니메이션을 구현할 수 있다. 아래의 예제는 대표적인 것으로 이해하면 된다. 기타 다양한 상황과 원하는 레이아웃에서의 구성으로 인해 구현 방법은 다를 것으로 예상되지만 대표적으로 많이 사용되는 사례들을 아래에 나열하였다. 부족할 경우 구체적인 구글링으로 원하는 것을 찾아 응용하면 될 것으로 생각된다.

아래 코드에 이해를 돕기 위해 각주 처리를 참고하여 이해하면 좋을 듯싶다.

/* 첫 번째 섹션 시작 */
<section>
  <h1>아래로 스크롤하여 개체 요소 표시하기 &#8595;</h1>
</section>
/* 첫 번째 섹션 끝 */
/* 두 번째 섹션 시작 */
<section>
  <div class="container reveal">
    <h2>두 번째 섹션</h2>
    <div class="text-container">
      <div class="text-box">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
    </div>
  </div>
</section>
/* 두 번째 섹션 끝 */
/* 세 번째 섹션 시작 */
<section>
  <div class="container reveal">
    <h2>세 번째 섹션</h2>
    <div class="text-container">
      <div class="text-box">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
    </div>
  </div>
</section>
/* 세 번째 섹션 끝 */
/* 네 번째 섹션 시작 */
<section>
  <div class="container reveal">
    <h2>네 번째 섹션</h2>
    <div class="text-container">
      <div class="text-box">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
      <div class="text-box">
        <h3>Section Text</h3>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore
          eius molestiae perferendis eos provident vitae iste.
        </p>
      </div>
    </div>
  </div>
</section>
/* 네 번째 섹션 끝 */

@import url('https://fonts.googleapis.com/css2?family=Asap&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Asap", sans-serif;
}
body{
  background: #42455a;
}
section{
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
section:nth-child(1){
  color: #e0ffff;
  }
section:nth-child(2){
  color: #42455a;
  background: #e0ffff;
} 
section:nth-child(3){
  color: #e0ffff;
}
section:nth-child(4){
  color: #42455a;
  background: #e0ffff;
}
section .container{
  margin: 100px;
}
section h1{
  font-size: 3rem;
  margin: 20px;
}
section h2{
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
}
section .text-container{
   display: flex;
}
section .text-container .text-box{
  margin: 20px;
  padding: 20px;
  background: #00c2cb;
}
section .text-container .text-box h3{
  font-size: 30px;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 10px;
}

@media (max-width: 900px){
  section h1{
    font-size: 2rem;
    text-align: center;
  }
  section .text-container{
    flex-direction: column;
  }
}

.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}

function reveal() {
  var reveals = document.querySelectorAll(".reveal");

  for (var i = 0; i < reveals.length; i++) {
    var windowHeight = window.innerHeight;
    var elementTop = reveals[i].getBoundingClientRect().top;
    var elementVisible = 150;

    if (elementTop < windowHeight - elementVisible) {
      reveals[i].classList.add("active");
    } else {
      reveals[i].classList.remove("active");
    }
  }
}

window.addEventListener("scroll", reveal);

고정 Header / Footer 스크롤시 애니메이션 처리

스크롤시 TEXT 애니메이션 처리

스크롤시 이미지 Parallax 스크롤에 SVG Mask 처리

3D EBook Flip Animation

Cross Color Text Reveal

스크롤시 좌측 이미지 전환

스크롤시 타이틀 애니메이션

Efficient Scroll Zoom

Physic Milestones Timeline

Side in on Scroll