Creating an Alternating Text Animation in HTML, CSS, and JavaScript
Animating text on a webpage can enhance user experience by drawing attention to important information or adding a dynamic feel to the…
Animating text on a webpage can enhance user experience by drawing attention to important information or adding a dynamic feel to the site. One interesting way to animate text is by alternating words in a sentence. This article will show you how to create an alternating text animation using HTML, CSS, and JavaScript.
Description
In this tutorial, we’ll create an alternating text animation where a specific word in a sentence changes every few seconds. The process involves using CSS for animation and JavaScript to update the text content dynamically.
HTML Structure
First, we need an HTML structure that includes a” element for the text that will alternate. Here’s a simple example:
<p>I love coding in <span class="alternating" id="alternating-text"></span>.</p>CSS for Animation
Next, we’ll define the CSS for the animation. We’ll use the ‘@keyframes’ rule to create an animation named ‘alternating-text’ that makes the ” disappear at the end of each cycle. This gives the illusion of the text changing.
.alternating {
animation-name: alternating-text;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
@keyframes alternating-text {
90% {
display: none;
}
}JavaScript for Dynamic Text
Now, we’ll use JavaScript to define an array of words that will be alternated. We’ll initialize the ” with the first word in the array and set up an event listener to change the text content on each iteration of the animation.
const texts = ['Java', 'Python', 'C', 'C++', 'C#', 'Javascript'];
const element = document.getElementById('alternating-text');
let i = 0;
const listener = e => {
i = i < texts.length - 1 ? i + 1 : 0;
element.innerHTML = texts[i];
};
element.innerHTML = texts[0];
element.addEventListener('animationiteration', listener, false);Full Implementation
Putting it all together, here’s the complete code for creating an alternating text animation:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alternating Text Animation</title>
<style>
.alternating {
animation-name: alternating-text;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease;
}
@keyframes alternating-text {
90% {
display: none;
}
}
</style>
</head>
<body>
<p>I love coding in <span class="alternating" id="alternating-text"></span>.</p>
<script>
const texts = ['Java', 'Python', 'C', 'C++', 'C#', 'Javascript'];
const element = document.getElementById('alternating-text');
let i = 0;
const listener = e => {
i = i < texts.length - 1 ? i + 1 : 0;
element.innerHTML = texts[i];
};
element.innerHTML = texts[0];
element.addEventListener('animationiteration', listener, false);
</script>
</body>
</html>Explanation
- HTML: We include a ‘
<span>‘ element within a ‘<p>‘ tag where the text will alternate. - CSS: The ‘.alternating’ class defines the animation properties. The ‘@keyframes’ alternating-text animation hides the text at the end of each cycle.
- We define an array of words (‘texts’). The ‘listener’ function updates the content of the ” with the next word in the array on each animation iteration. The ‘animationiteration’ event triggers this function.
Use Case: Enhancing User Engagement
This alternating text animation can be used to highlight different features, services, or programming languages your website supports, making the content more engaging and interactive for the users.
Wrapping It Up
Creating an alternating text animation using HTML, CSS, and JavaScript is a straightforward process that adds a dynamic element to your website. By understanding and utilizing this technique, you can enhance the visual appeal and user experience of your web pages.