Wavy Text
text effects 1998 still worksLetters ride up and down on a sine wave.
In 2026: Works. The original positioned each letter with a <layer>, this one uses spans.
Where it came from: Dynamic Drive, roughly 1998. The original positioned each letter with a Netscape LAYER. Wikipedia ↗
<div id="wavy" style="font: bold 28px Arial; color: #FF00FF"></div>
<script language="JavaScript">
var wtext = "WAVY TEXT!";
var spans = [];
var host = document.getElementById("wavy");
for (var i = 0; i < wtext.length; i++) {
var s = document.createElement("span");
s.style.display = "inline-block";
s.innerHTML = wtext.charAt(i) === " " ? " " : wtext.charAt(i);
host.appendChild(s);
spans.push(s);
}
var phase = 0;
setInterval(function () {
phase += 0.25;
for (var j = 0; j < spans.length; j++) {
spans[j].style.transform =
"translateY(" + (Math.sin(phase + j * 0.6) * 10).toFixed(1) + "px)";
}
}, 50);
</script>