Skip to content

Instantly share code, notes, and snippets.

@robinsloan
Last active October 12, 2021 07:31
Show Gist options
  • Save robinsloan/a15cad512aff449ac9dcdd12095f03b0 to your computer and use it in GitHub Desktop.
Save robinsloan/a15cad512aff449ac9dcdd12095f03b0 to your computer and use it in GitHub Desktop.
WiggleTech
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment