A Vibrant Text Banner: Bringing Words to Life with JavaScript
This blog post explores a captivating technique for animating text, transforming simple words into a dynamic and eye-catching visual experience. We’ll delve into the code provided, breaking down its functionality and highlighting its creative potential.
The Concept:
The code creates an animated text banner, where each letter of the phrase “Cool Animated Text Banner” is individually manipulated, resulting in a vibrant and engaging visual display. This effect is achieved through JavaScript, dynamically altering the position, color, and styling of each letter over time.
Code Breakdown:
- HTML Structure:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lacquer&display=swap" rel="stylesheet">
<a href="https://411center.com/r/codepen" target="_blank">
<div class="rugrats">Cool Animated</div>
<div class="rugrats">Text Banner</div>
</a>
- The code sets up a basic HTML structure with two
<div>
elements, each containing a part of the phrase “Cool Animated Text Banner.” The elements are wrapped in an<a>
tag for linking purposes.
- CSS Styling:
body {
margin: 12vh;
text-align: center;
font-size: calc(8vw + 8vh);
background: #314d79;
color: #fff;
font-family: sans-serif;
letter-spacing: -0.3vw;
overflow: hidden;
font-family: "Lacquer", system-ui;
}
.rugrats {
margin: 0 auto;
text-align: center;
overflow: hidden;
white-space: nowrap;
}
.rugrats span {
display: inline-block;
transition: color linear 0.5s forwards;
-webkit-text-stroke-width: 0.32vw;
-webkit-text-stroke-color: black;
text-shadow: 0.4vw 0.5vw #000;
}
.rugrats span {
text-transform: capitalize;
text-transform: lowercase;
/* animation:caseChange 5s ease infinite forwards;
}
@keyframes caseChange{
from{
text-transform:uppercase;
}
to{
text-transform:lowercase;
}
} */
}
- The CSS styles the body and the
rugrats
divs, setting up the background, font, and text alignment. It also styles the individual letters (span
) within the divs, adding a text stroke and shadow for a visually striking effect.
- JavaScript Animation:
var divs = document.querySelectorAll(".rugrats");
divs.forEach(function (div) {
var text = div.textContent;
div.innerHTML = "";
for (var i = 0; i < text.length; i++) {
var span = document.createElement("span");
span.textContent = text[i];
div.appendChild(span);
}
var spans = div.querySelectorAll("span");
function shuffle(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor(Math.random() * (i + 1));
var temp = array[i];
array[i] = array[j];
array[j] = temp;
}
return array;
}
spans = shuffle(Array.from(spans));
function getRandomValue() {
return Math.random() * 0.4 - 0.24;
}
function applyRandomTransform() {
spans.forEach(function (span) {
var xOffset = getRandomValue() * 10;
var yOffset = getRandomValue() * 15;
var rotation = getRandomValue() * 6;
span.style.transform =
"translate(" +
xOffset +
"px, " +
yOffset +
"px) rotate(" +
rotation +
"deg)";
span.style.textIndent = xOffset + "px";
});
}
function getRandomColor() {
var letters = "0123456789ABCDEF";
var color = "#";
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
var currentIndex = 0;
function changeColorSequentially() {
spans.forEach(function (span, index) {
var colorIndex = (index + currentIndex) % spans.length;
span.style.color =
colorIndex === 0 ? getRandomColor() : spans[colorIndex - 1].style.color;
});
currentIndex = (currentIndex + 1) % spans.length;
}
setInterval(changeColorSequentially, 250);
setInterval(applyRandomTransform, 100);
});
- The JavaScript code iterates through each
div
element, breaking down the text into individual letters (span
) and shuffling their order. - It then applies random transformations (translation, rotation, and text indent) to each letter at regular intervals.
- Finally, it cycles through the letters, changing their color sequentially, creating a dynamic and colorful effect.
Key Features:
- Dynamic Text: Each letter is treated as an independent element, allowing for unique and unpredictable animation.
- Randomized Transformations: The use of random values for translation, rotation, and text indent creates a visually engaging and unpredictable effect.
- Sequential Color Changes: The color of each letter changes in a sequential manner, adding a dynamic and vibrant element to the animation.
Possible Enhancements:
- More Complex Animations: Explore more sophisticated animation techniques like easing functions or particle effects.
- Interactive Elements: Allow users to adjust the speed of the animation, the color palette, or even the text itself.
- Responsive Design: Ensure the animation adapts seamlessly to different screen sizes and resolutions.
See the Pen Cool Responsive Animated Text Banner by Terry (@codinginbarn) on CodePen.
Conclusion:
This code provides a simple yet effective way to animate text, transforming it into a captivating visual element. By understanding the underlying principles and techniques, you can build upon this foundation to create even more intricate and engaging text animations. Let your creativity flow and explore the endless possibilities of dynamic text!