<div class="box" id="box-1">Box 1</div>
<div class="box" id="box-2">Box 2</div>
<div class="box" id="box-3">Box 3</div>
<div class="box" id="box-4">Box 4</div>
<div class="box" id="box-5">Box 5</div>
<div class="box" id="box-6">Box 6</div>

.box {
  height: 500px;
  line-height: 500px;
  text-align: center;
  color: white;
  font-size: 50px;
  margin: 100px 30px;
  border-radius: 20px;
  box-shadow: 3px 3px 10px rgba(33,33,33,0.8);
  background-color: grey;
}

/**
* Author: Peter Unger <peps.unger@gmail.com>
* Chrome status: https://www.chromestatus.com/feature/5695342691483648
* Article: https://developers.google.com/web/updates/2016/04/intersectionobserver
* Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
**/

var IntersectionObserverCallback = function(entries) { 
  Array.prototype.forEach.call(entries, function(entry) {
    if(entry.target.dataset.visible == "true") {
      entry.target.dataset.visible = "false";
      entry.target.style.backgroundColor = "#c9302c";
      console.log("Entry left viewport: " + entry.target.id);
    } else if(entry.target.dataset.visible == "false") {
      entry.target.dataset.visible = "true";
      entry.target.style.backgroundColor = "#449d44";
      console.log("Entry entered viewport: " + entry.target.id);
    } else {
      console.log("Untracked entry found.. : " + entry.target.id);
    }
  });
};

var observer = new IntersectionObserver(IntersectionObserverCallback);

window.addEventListener('load', function(e) {
  var targets = document.querySelectorAll('.box');
  Array.prototype.forEach.call(targets, function(target) {
    target.dataset.visible = "false";
    target.style.backgroundColor = "#c9302c";
    observer.observe(target);
  });
});