Typing Effect Using Tailwind UI
The Tailwind Component Typing Effect utilizes Tailwind UI to create a dynamic and engaging typewriter-like text effect.
animation
Loading component...
65 lines
<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=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
.typing-container {
overflow: hidden;
border-right: .15em solid #000;
white-space: nowrap;
}
</style>
<div class="container mx-auto p-4 my-32">
<div class="py-20 bg-black text-white text-center rounded-xl">
<h1 class="text-xl font-medium mb-4">Typing Effect</h1>
<div class="text-4xl font-bold typing-container" id="typing-container">
</div>
</div>
</div>
<script>
// JavaScript for Typing Effect
const texts = ["Hello, Tailwind CSS!", "This is a typing effect.", "Enjoy the animation!"];
const typingContainer = document.getElementById("typing-container");
let currentTextIndex = 0;
let currentText = "";
let isDeleting = false;
let typingSpeed = 100; // Adjust the typing speed (milliseconds per character)
function type() {
const text = texts[currentTextIndex];
if (isDeleting) {
currentText = text.substring(0, currentText.length - 1);
} else {
currentText = text.substring(0, currentText.length + 1);
}
typingContainer.innerHTML = currentText;
let typingDelay = isDeleting ? typingSpeed / 2 : typingSpeed;
if (!isDeleting && currentText === text) {
typingDelay = 1500; // Pause after typing
isDeleting = true;
} else if (isDeleting && currentText === "") {
isDeleting = false;
currentTextIndex++;
if (currentTextIndex === texts.length) {
currentTextIndex = 0;
}
}
setTimeout(type, typingDelay);
}
document.addEventListener("DOMContentLoaded", function () {
type();
});
</script>