Animation Counter

HTML, CSS, JS

by Ovi Stof

HTML

<body  onload="load()">
  <h1>Animation Counter</h1>
  <div class="container">
    <div class="row">
      <div class="column">
        <div class="card">
          <p><i class="fa fa-graduation-cap"></i></p>
          <p><span class="val_num"><span id="0101">2880</span>+</span><br>
            students</p>
        </div>
      </div>
      <div class="column">
        <div class="card">
          <p><i class="fa fa-users"></i></p>
          <p><span class="val_num"><span id="0102">50</span>+</span><br>
            teachers</p>
        </div>
      </div>
      <div class="column">
        <div class="card">
          <p><i class="fa  fa-user-plus"></i></p>
          <p><span class="val_num"><span id="0103">4+</span>+</span><br>
            IT staff</p>
        </div>
      </div>
      <div class="column">
        <div class="card">
          <p><i class="fa  fa-user-plus"></i></p>
          <p><span class="val_num"><span id="0104">88+</span>+</span><br>
            assistants</p>
        </div>
      </div>
    </div>
  </div>
</body>

CSS

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
* {
  box-sizing: border-box;
}
body {font-family: Arial, Helvetica, sans-serif;}
.column { /* Float four columns side by side */
  float: left;
  width: 25%;
  padding: 0 5px;
}
.row {margin: 0 -5px;}
.row:after { /* Clear floats after the columns */
  content: "";
  display: table;
  clear: both;
}
@media screen and (max-width: 600px) {/* Responsive columns */
  .column {
    width: 100%;
    display: block;
    margin-bottom: 10px;
  }
}
.card {/* Style the counter cards */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #65a8a8;
  color: white;
  height:225px;
}
.fa {font-size:50px;}
.val_num {font-size:2em;margin:0;}

JavaScript

function animate(obj, initVal, lastVal, duration) {
    let startTime = null;
    let currentTime = Date.now(); //get the current timestamp and assign it to the currentTime variable

    const step = (currentTime ) => //pass the current timestamp to the step function
    { 
      if (!startTime)         //if the start time is null, assign the current time to startTime
      {
        startTime = currentTime ;
      }

      const progress = Math.min((currentTime  - startTime) / duration, 1); //calculate the value to be used in calculating the number to be displayed
      obj.innerHTML = Math.floor(progress * (lastVal - initVal) + initVal); //calculate what to be displayed using the value gotten above
      if (progress < 1)  //checking to make sure the counter does not exceed the last value(lastVal)
      {
        window.requestAnimationFrame(step);
      }
      else
      {
        window.cancelAnimationFrame(window.requestAnimationFrame(step));
      }
    };
    window.requestAnimationFrame(step); //start animating
  }
  let text1 = document.getElementById('0101');
  let text2 = document.getElementById('0102');
  let text3 = document.getElementById('0103');
  let text4 = document.getElementById('0104');  

  const load = () =>
  {
    animate(text1, 100, 2880, 5000);
    animate(text2, 0, 50, 5000);
    animate(text3, 1, 4, 5000);
    animate(text4, 10, 88, 5000);    
  }