animate on scroll

HTML

  <div class="aos">
    <h1>Heading 1</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, saepe asperiores consectetur unde ab voluptatum quidem. Harum libero animi pariatur repudiandae inventore exercitationem modi voluptatum, est magnam distinctio, molestiae maiores!</p>
  </div>

  <div class="aos">
    <h1>Heading 2</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, saepe asperiores consectetur unde ab voluptatum quidem. Harum libero animi pariatur repudiandae inventore exercitationem modi voluptatum, est magnam distinctio, molestiae maiores!</p>
  </div>

  <div class="aos">
    <h1>Heading 3</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, saepe asperiores consectetur unde ab voluptatum quidem. Harum libero animi pariatur repudiandae inventore exercitationem modi voluptatum, est magnam distinctio, molestiae maiores!</p>
  </div>

  <div class="aos">
    <h1>Heading 4</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque, saepe asperiores consectetur unde ab voluptatum quidem. Harum libero animi pariatur repudiandae inventore exercitationem modi voluptatum, est magnam distinctio, molestiae maiores!</p>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="app.js"></script>

CSS

기본 박스 opacity:0; => active 클래스 붙으면 opacity:1;

cubic-bezier
베지어 곡선 : 애니메이션 운동 경로 설정할 때 씀
+-- ease-out : 느렸다가 빠르게 (사라질 때는 천천히 사라지다가 갑자기 확 사라지도록)
+-- ease-in : 시작할때 빨랐다가 느리게 (진입할 때 빠르게 하기 위해서 active일 때 ease-in 적용)

.aos {
  position: relative;
  top: 80px;
  opacity: 0;
  height: 20vh;
  width: 40%;
  padding: 1rem;
  transition: 0.5s ease-out;
  border: 1px solid black;
  background-color: rgb(148, 148, 148);
  margin: 5rem 5rem 50vh 5rem;
  overflow: hidden;
}

.aos.active {
  top: 0;
  opacity: 1;
  transform: translateY(-60px);
  transition: 0.5s ease-in;
}

JS

lodash
lodash는 jquery, react와 같은 라이브러리 중 하나
jquery가 자바스크립트 DOM를 간편하게 다루기 위해 등장했다면 lodash는 주로 arrray, collection, data 같은 데이터 구조를 간편하게 함수형으로 다룰 수 있게 탄생함.
[LODASH] 📚 Lodash.js 소개 및 ES6 자바스크립트와 비교

console.count() 호출된 횟수를 출력함

클래스 active를 붙이면 div 박스를 보여주고,
클래스 active를 떼면 div 박스를 지운다.

언제 active를 붙이냐면,

window.innerHeight 뷰포트 높이
elem.getBoundingClientRect().top이면 요소 최상단 높이이므로

스크롤을 내리다 보면,
elem.getBoundingClientRect().top - window.innerHeight 값이 계속 작아지므로
특정 시점에서 true를 판단해서 active 클래스를 붙여주면 된다.

lodash의 _.throttle 함수
=> 무한 스크롤 시에 유용한 함수. 한 번 작동하면 일정 시간 동안 (인자로 받은 delay 만큼)더 이상 작동하지 않도록 막아준다.

주석처리한 throttle 함수는 vanilla로 구현한 거
+-- 인자로 받은 delay보다 작을 때는 return; 처리만 하다가 커지면 fn.apply(a,...b);

fn.apply(thisArg, [argsArray])
=> this 인자를 첫번째 인자로 받고, 두번째 인자로 배열(유사배열)을 받는다.

함수의 메소드와 arguments
유사배열을 받으므로 배열 메서드를 쓰고 싶으면 apply가 유용하다
쓰고싶은배열.apply.(null, arr)
예를 들어 Math.max 쓰고 싶으면 Math.max.apply(null, arr) 이런 식으로 사용

let aosElements = Array.from(document.querySelectorAll('.aos'));

// aosElements.forEach(element => {
//   console.log(element.getBoundingClientRect());
// })

window.addEventListener('scroll', _.throttle(scanElements, 50));

function scanElements(e) {
  console.count(e);
  aosElements.forEach(element => {
    if (isVisable(element)) {
      element.classList.add('active');
    } else {
      element.classList.remove('active');
    }
  })
}

function isVisable(element) {
  const elementDiv = element.getBoundingClientRect();
  let distanceFromTop = -300;
  return elementDiv.top - window.innerHeight < distanceFromTop ? true : false;
}

// function throttle(fn, delay) {
//   let lastCall = 0;
//   return (...args) => {
//     let context = this;
//     let current = new Date().getTime();

//     if (current - lastCall < delay) {
//       return
//     }
//     lastCall = current;
//     return fn.apply(context, ...args);
//   }
// }

참고

Vanilla JavaScript: Animate On Scroll

중학생도 알 수 있는 베지에 곡선(Bezier Curves)