[WEB] scroll animation bottom to top

스크롤시 아래서 위로 올라오는 애니메이션 처리하고 싶을때!

 

간단하게 설명하면 스크롤되는 높이값을 측정해서 그 높이에 있는 element에 active class를 추가하여 처리해주면된다!

코드는 아래와 같다

 

 

1. html 코드

<section class="container">
  <h2>Caption</h2>
  <div class="text-container">
    <div class="text-box">
      <h3>Section Text</h3>
      <p>Random text</p>
    </div>
    <div class="text-box">
      <h3>Section Text</h3>
      <p>Random text</p>
    </div>
    <div class="text-box">
      <h3>Section Text</h3>
      <p>Random text</p>
    </div>
  </div>
</section>

 

2. css

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

 

3. js

window.addEventListener("scroll", function(){
    var sections = document.querySelectorAll(".reveal")
    for (var i = 0; i < sections.length; i++) {
        var windowHeight = window.innerHeight;
        var elementTop = sections[i].getBoundingClientRect().top;
        var elementVisible = 150;
        
        if (elementTop < windowHeight - elementVisible) {
          sections[i].classList.add("active");
        } else {
          sections[i].classList.remove("active");
        }
	}
});

 

 

#참고

https://alvarotrigo.com/blog/css-animations-scroll/