Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create a typing effect with JavaScript?

Javascript Web Development Object Oriented Programming

To create a typing effect with JavaScript, you can simulate the appearance of text being typed character by character. This effect is commonly used for animated headers, loading messages, or interactive demonstrations.

Basic Typing Effect

Here's a complete example that demonstrates how to create a typing effect:

<!DOCTYPE html>
<html>
<head>
<style>
   body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      padding: 20px;
   }
   button {
      padding: 10px 20px;
      font-size: 18px;
      background-color: rgb(128, 19, 218);
      color: white;
      border: none;
      cursor: pointer;
      border-radius: 5px;
   }
   button:hover {
      background-color: rgb(100, 15, 180);
   }
   .typing-text {
      color: crimson;
      font-size: 24px;
      min-height: 30px;
   }
</style>
</head>
<body>
   <h1>JavaScript Typing Effect</h1>
   <button class="typeButton">Start Typing</button>
   <button class="resetButton">Reset</button>
   <h2 class="typing-text"></h2>
   
   <script>
      let i = 0;
      let text = 'This text is being typed character by character... Amazing, right?';
      let speed = 80; // milliseconds per character
      let isTyping = false;
      
      document.querySelector('.typeButton').addEventListener('click', startTyping);
      document.querySelector('.resetButton').addEventListener('click', resetText);
      
      function startTyping() {
         if (isTyping) return; // Prevent multiple instances
         isTyping = true;
         typeText();
      }
      
      function typeText() {
         if (i < text.length) {
            document.querySelector('.typing-text').innerHTML += text.charAt(i);
            i++;
            setTimeout(typeText, speed);
         } else {
            isTyping = false;
         }
      }
      
      function resetText() {
         document.querySelector('.typing-text').innerHTML = '';
         i = 0;
         isTyping = false;
      }
   </script>
</body>
</html>

How It Works

The typing effect works by:

  • Character-by-character display: Using charAt(i) to get one character at a time
  • Recursive timing: setTimeout() creates delays between characters
  • DOM manipulation: Adding each character to innerHTML progressively
  • State management: Variables track position and prevent overlapping animations

Enhanced Version with Cursor

For a more realistic effect, add a blinking cursor:

<!DOCTYPE html>
<html>
<head>
<style>
   .typing-cursor::after {
      content: '|';
      color: crimson;
      animation: blink 1s infinite;
   }
   
   @keyframes blink {
      0%, 50% { opacity: 1; }
      51%, 100% { opacity: 0; }
   }
   
   .typing-text {
      color: #333;
      font-size: 20px;
      font-family: monospace;
   }
</style>
</head>
<body>
   <h1>Typing Effect with Cursor</h1>
   <button onclick="startTypingWithCursor()">Start Typing</button>
   <div class="typing-text" id="typewriter"></div>
   
   <script>
      function startTypingWithCursor() {
         const text = "Hello! I'm being typed with a blinking cursor...";
         const element = document.getElementById('typewriter');
         element.innerHTML = '';
         element.classList.add('typing-cursor');
         
         let i = 0;
         function type() {
            if (i < text.length) {
               element.innerHTML = text.substring(0, i + 1);
               i++;
               setTimeout(type, 100);
            } else {
               // Remove cursor after typing is complete
               setTimeout(() => element.classList.remove('typing-cursor'), 1000);
            }
         }
         type();
      }
   </script>
</body>
</html>

Key Parameters

Parameter Purpose Typical Value
speed Delay between characters (ms) 50-150ms
i Current character position 0 to text.length
text String to be typed Any string

Common Use Cases

  • Website headers: Animated introductions and taglines
  • Loading screens: Progress messages and status updates
  • Tutorials: Step-by-step code demonstrations
  • Chat simulations: Realistic messaging interfaces

Conclusion

JavaScript typing effects use setTimeout() and character-by-character DOM updates to create smooth animations. Adjust the speed parameter and add CSS cursors for enhanced realism.

Updated on: 2026-03-15T23:18:59+05:30

338 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements