<!-- HTML & CSS for Typewriter Effect -->
<style> #dynamic-heading { border-right: 2px solid transparent; /* Initially set cursor color to transparent */ white-space: nowrap; /* Prevents the text from wrapping */ overflow: hidden; /* Hides the text that is not yet shown */ width: 0; /* Starts with a width of 0 */ animation: typing 3s steps(30, end), blink-caret 0.75s step-end infinite; /* Typing animation */ } @keyframes typing { from { width: 0; } to { width: 100%; } } @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: inherit; } /* Keep the cursor matching the text color */ }
</style> <h1 id="dynamic-heading" class="your-heading-class">Your Dynamic Heading Here</h1> <!-- JavaScript for Typing Effect -->
<script> document.addEventListener("DOMContentLoaded", function() { const heading = document.getElementById('dynamic-heading'); const text = heading.innerText; // Get the text of the heading heading.innerText = ''; // Clear the heading text // Get the computed color of the heading element const computedStyle = window.getComputedStyle(heading); const cursorColor = computedStyle.color; // Extract the color heading.style.borderRight = `2px solid ${cursorColor}`; // Set the cursor color let i = 0; // Index for typing const typingSpeed = 100; // Speed in milliseconds function typeWriter() { if (i < text.length) { heading.innerText += text.charAt(i); i++; setTimeout(typeWriter, typingSpeed); } else { heading.style.width = 'auto'; // Set width to auto after typing is done heading.style.borderRight = 'none'; // Hide the cursor after typing is done } } typeWriter(); // Start the typing effect });
</script>