Animate on Scroll

by pphheerroonn

HTML

<div class="main">
<div class="box fade-in-element">
<h1>
Hello
</h1>
</div>
<div class="box hidden">
<h1>
Hello
</h1>
</div>
<div class="box hidden">
<h1>
Hello
</h1>
</div>
<div class="box hidden">
<h1>
Hello
</h1>
</div>
<div class="box hidden">
<h1>
Hello
</h1>
</div>
<div class="box hidden">
<h1>
Hello
</h1>
</div>
<div class="box hidden">
<h1>
Hello
</h1>
</div>
<div class="box hidden">
<h1>
Hello
</h1>
</div>

</div>

CSS

.main{
  height: 5000px;
  background: #f2f2f2;
  padding: 20px;
}

.box{
  padding: 20px;
  margin: 20px;
  margin-top: 500px;
  background: white;
  opacity:
}

@keyframes fade-in {
    from { opacity: 0; transform: scale(.7,.7) }
    to { opacity: 1; }
}
.fade-in-element {
  animation: fade-in 1.4s;
}

.hidden {
  opacity: 0;
}

JavaScript

var elements;
  var windowHeight;

  function init() {
    elements = document.querySelectorAll('.hidden');
    windowHeight = window.innerHeight;
  }

  function checkPosition() {
    for (var i = 0; i < elements.length; i++) {
      var element = elements[i];
      var positionFromTop = elements[i].getBoundingClientRect().top;

      if (positionFromTop - windowHeight <= 0) {
        element.classList.add('fade-in-element');
        element.classList.remove('hidden');
      }
    }
  }

  window.addEventListener('scroll', checkPosition);
  window.addEventListener('resize', init);

  init();
  checkPosition();