WiggleTech

## wiggletech.html
<html>
<head>

<style type="text/css">

body {
  font-family: Arial, sans-serif;
  font-size: 64px;
}

.wiggleCharContainer {
  position: relative;
  display: inline-block;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: baseline;
}

.wiggleChar {
  position: relative;
  display: inline-block;
  transform: translateZ(0);
}

</style>

<script type="text/javascript">

let wiggleStrings = new Array();

let initWiggleTech = function() {
  document.querySelectorAll(".wiggletech").forEach(function(element){
    let chars = document.createElement("div");
    chars.className = "wiggleCharContainer";

    let wiggleString = new Array();

    element.innerHTML.split("").forEach(function(char){
      let charElement = document.createElement("div");
      charElement.className = "wiggleChar";
      if (char == " ") {
        charElement.innerHTML = "&nbsp;";
      } else {
        charElement.innerHTML = char;
      }
      chars.appendChild(charElement);
      wiggleString.push(charElement);
    });

    element.parentNode.replaceChild(chars, element);
    wiggleStrings.push(wiggleString);
  });
}

let wiggle = function(t){
  const SCALE_FACTOR = 5.0; // in pixels
  const SLOW_FACTOR = 200.0; // higher = slower
  wiggleStrings.forEach(function(wiggleString){
    let length = wiggleString.length;
    wiggleString.forEach(function(wiggleChar, index){
      let adjustedTime = (t/SLOW_FACTOR) + (parseFloat(index) / parseFloat(length) * Math.PI);
      console.log(adjustedTime);
      wiggleChar.style.top = -( Math.sin(adjustedTime) + 1.0 ) * SCALE_FACTOR;
    });
  });

  requestAnimationFrame(wiggle);
}

document.addEventListener("DOMContentLoaded", function(){
  initWiggleTech();

  window.requestAnimationFrame(wiggle);
});

</script>
</head>
<body>

<p>Here we are, then. WiggleTech is <span class="wiggletech">online</span>. Isn't that nice?</p>
</body>