How to create text writting animiation effect in hero section using Html,Css and JS.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Gradient Text Animation</title> </head> <body> <section class="hero"> <div class="container"> <div class="title-wrapper"> <h1 class="gradient-text" id="typed-text"></h1> <span class="cursor"></span> </div> <p class="description"> Create stunning websites and applications with our modern development platform. Fast, secure, and scalable. </p> <div class="buttons"> <a href="#" class="button button-primary">Get Started</a> <a href="#" class="button button-secondary">Learn More</a> </div> </div> </section> </body> </html>

<script> const text = "Build something amazing"; const typedTextElement = document.getElementById('typed-text'); let charIndex = 0; function typeText() { if (charIndex < text.length) { typedTextElement.textContent += text.charAt(charIndex); charIndex++; setTimeout(typeText, 100); } } // Start typing animation when the page loads window.addEventListener('load', typeText); </script>

Let me break down the key features of the Above Code.

1. The Typing Effect

The text “Build something amazing” appears letter by letter
It’s like someone is typing it in real-time
This is done using simple JavaScript that adds one letter at a time

javascript
const text = "Build something amazing"; // Adds each letter one by one with a small delay

2. The Rainbow Gradient Text

The text has a beautiful color gradient flowing from blue to purple to pink
It’s not just plain black text, but colorful and eye-catching

Css
/* This creates the rainbow effect */ background: linear-gradient(to right, #2563eb, #9333ea, #db2777);

3. The Blinking Cursor

There’s a blinking cursor at the end of the text
Just like what you see when typing in a text editor
It keeps blinking even after the text is fully typed

Css
/* Makes the cursor blink */ animation: blink 0.53s infinite;

4. The Buttons

Two nice-looking buttons below the text
Get Started” button with a gradient background
“Learn More” button with a simple border
They both have hover effects (change appearance when you move your mouse over them)

5. Mobile-Friendly Design

Everything looks good on both phones and computers.
The text size adjusts automatically to fit different screens.
Buttons stack on top of each other on small screens.

Css
/* Makes text size responsive */ font-size: clamp(2rem, 5vw, 4.5rem);

6. Easy to Customize

The text that gets typed.
How fast it types.
The colors of the gradient.
The blinking speed of the cursor.
The button styles

7. Clean and Simple

Everything is in one file.
No need to install anything.
Works in all modern browsers.
No complicated setup is required.

Think of it like a digital welcome sign that writes itself! It’s perfect for grabbing attention at the top of a website, and it’s built in a way that’s easy to understand and modify, even if you’re not an expert coder

How to create text writting animiation effect in hero section using Html,Css and JS