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