tom sebastian scroll demo

by al nmeri

HTML

<body onload="start()">
  <div id="firstPara">

  </div>
</body>

CSS

body {
   height: 1000px;
 }
 
 div {
   position: relative;
   top: 700px;
 }
 
 div #firstPara {
   border: 1px solid;
 }

JavaScript

function start() {
  var s = 0;
  var interval = undefined;

  function slideIn() {
    console.log(distanceSoFar);
    if (distanceSoFar > "130") {
      while (firstString.length > 0) {
        var stringOut = firstString.shift();
        firstPara.innerHTML += stringOut;
        console.log(s++);
      }
      clearInterval(interval);
      interval = undefined;
    }
  };

  var firstString = ["This ", "is ", " me."];
  var firstPara = document.querySelector("#firstPara");
  var distanceSoFar = (document.body.scrollTop);

  window.addEventListener("scroll", function() {
    if (!interval)
      interval = setInterval(slideIn, 450);
  });
};

document.body.addEventListener("load", start);