Wave Text Effect
Add kinetic energy to your headings. This script automates the tedious process of wrapping letters in spans to create a fluid wave animation.
WAVY TEXT
Copy the Script
<style>
.wave-char {
display: inline-block;
animation: wave 1s infinite;
}
@keyframes wave {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
</style>
<h1 class="wave-text">HELLO</h1>
<script>
// Split text into spans with delay
document.querySelectorAll('.wave-text').forEach(element => {
let text = element.innerText;
element.innerHTML = text.split('').map((char, i) =>
`<span class="wave-char" style="animation-delay:${i * 0.1}s">${char}</span>`
).join('');
});
</script>Frequently Asked Questions
The JavaScript wraps every letter in a `` tag. It then assigns a CSS `animation-delay` to each span, creating a staggered movement effect.
Yes. The text remains in the HTML document. Robots can read the full word even if it is split into spans for visual styling.
Yes. Adjust the `animation-duration` in the CSS (e.g., `0.5s` for fast, `2s` for slow) to change the wave tempo.