Edit in JSFiddle

// 해당 요소가 viewport 내에 있는지 확인하는 함수 
// 대표적인 예시로 사용되고 있는 stackoverflow의 예시를 가져왔습니다. 
// https://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433
function isElementInViewport (el) {
  var rect = el.getBoundingClientRect();
  return (
      rect.top >= 0 &&
      rect.left >= 0 &&
      rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
      rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

// scroll 이벤트를 추가하고, 해당 element에 callback 함수를 등록하는 함수 
const addEventToEl = (elList) => {
  document.addEventListener('scroll', () => {
  	elList.forEach(el => {
    	if (isElementInViewport(el)) {
      el.classList.add('tada');
      } else {
        el.classList.remove('tada');
      }
    })
  })
}

// 동작시킬 elements리스트에 이벤트를 등록
const boxElList = document.querySelectorAll('.box');
addEventToEl(boxElList);

<div class="example">
  <h1 class="title">Scroll Down <span class="arrow">👇</span></h1>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

.example {
  padding-top: 800px;
  padding-bottom: 300px;
  width: 100%;
  background: #eee;
  position: relative;
}

.title {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.arrow {
  display: inline-block;
  animation: bounce 1s infinite ease;
}

.box {
  margin: 0 auto 200px auto;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  background: #7de2fc linear-gradient(-225deg, #7de2fc 0%, #b9b6e5 100%);
}

.box.tada {
  animation: tada 1s ease;
}