How to Create a Typing Effect using HTML, CSS, JavaScript, and the TypeIt Utility

1. Introduction¶

Creating a typing effect on your web page can add a dynamic and engaging element to your site. This tutorial will guide you through the process using both CSS and JavaScript.

2. HTML Structure¶

Start by creating a simple HTML structure to contain the text that will have the typing effect.

<div class="typewriter">
  <h1 class="typing-text">Your text goes here...</h1>
</div>

3. CSS Typing Effect¶

Next, we'll use CSS to create the typing effect.

.typewriter {
  display: inline-block;
  overflow: hidden;
  border-right: .15em solid orange; /* Cursor effect */
  white-space: nowrap; /* Prevents text from wrapping */
  animation: typing 4s steps(40, end), blink-caret .75s step-end infinite;
}
 
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
 
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}

Explanation:¶

.typewriter: The overflow: hidden ensures that text is hidden beyond the container's width. border-right creates a cursor effect. The animation property applies the typing and blinking cursor animations.

@keyframes typing: Defines the typing effect by increasing the width of the text from 0 to 100%.

@keyframes blink-caret: Creates a blinking cursor by toggling the border color.

4. Using JavaScript for More Control¶

For more control and flexibility, you can use a JavaScript library like TypeIt.

Include the Library

Add the TypeIt library to your project:

 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/typeit.min.js"></script>

HTML Structure

<div id="typewriter"></div>

JavaScript Initialization

new TypeIt("#typewriter", {
  strings: "Your text goes here...",
  speed: 50,
  waitUntilVisible: true,
}).go();

Explanation:

• strings: Specifies the text to be typed.
• speed: Controls the typing speed.
• waitUntilVisible: Ensures the effect starts only when the element is visible.

5. Combining CSS and JavaScript¶

You can combine both CSS and JavaScript for more complex effects.

HTML Structure

<div class="typewriter">
  <h1 id="typing-js">JavaScript text here...</h1>
  <h1 class="typing-css">CSS text here...</h1>
</div>

CSS for Typing Effect

.typing-css {
  overflow: hidden;
  white-space: nowrap;
  border-right: .15em solid orange;
  animation: typing 4s steps(40, end), blink-caret .75s step-end infinite;
}

JavaScript Initialization

new TypeIt("#typing-js", {
  strings: "JavaScript text here...",
  speed: 50,
  waitUntilVisible: true,
}).go();

6. Conclusion¶

This tutorial covers the basics of creating a typing effect using CSS and JavaScript. You can extend this project by adding more features, such as dynamic text changes, custom cursor styles, and more complex animations.

By following these steps, you can create an engaging typing effect on your website to enhance user interaction and visual appeal.

For more detailed implementations and examples, refer to resources like CSS-Tricks and the TypeIt documentation.

The solution code for this tutorial can be found on Github.¶