Intro with Typing Animation Hero Template
Introduce yourself in style with a dynamic hero section that features an animated typing effect.
This template is a popular choice for personal and portfolio websites, as it creates an engaging introduction that immediately draws the visitor's attention.
About the Typing Animation Hero
This hero section creates a lively, interactive feel right from the moment the page loads. It's a fantastic way for creative professionals like developers, designers, and writers to showcase their role or skills in a memorable way. The effect is achieved with a lightweight, dependency-free JavaScript snippet.
Features
- Dynamic Text Effect: The animation types out and deletes a series of words, creating a continuous loop.
- Easily Customizable: You can change the words to be typed, as well as the typing and deleting speed, directly in the JavaScript.
- Zero Dependencies: The entire effect is created with a self-contained JavaScript function and requires no external libraries.
- Minimalist & Clean: A simple, text-focused design that can be easily integrated into any portfolio layout.
Code Breakdown
The component is split into CSS for your site's head, HTML for the body, and a JavaScript block that should be placed just before your closing body tag.
The blinking cursor is created in pure CSS using an ::after pseudo-element on the target span. A @keyframes animation rapidly changes its opacity to simulate blinking.
The JavaScript logic handles the typing effect. An array holds the words you want to display. A function, which is triggered by setInterval(), runs repeatedly. Inside this function, logic determines whether to add the next letter of a word (typing) or remove the last letter (deleting). Once a word is fully typed or deleted, a brief pause is simulated before the next action begins. The script is wrapped in an immediately-invoked function expression (IIFE) to prevent interfering with any other code on your site.