robinsloan/wiggletech.html

## 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>
	<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 = " ";
	} 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>