The Typed Text Element allows you to create animated headings looking like a person would type them. You can use multiple lines of text, set the speed and play it in a loop (or not).
Typed Text is absolutely SEO friendly, with a structured fallback heading.
Usage Examples
Focus visitors on Heading.
News Tickers.
Animated Headings
..
Typed Text Properties
Display as: How should the typed text be displayed? As a heading or a "normal" text.
Type Speed: Set the speed in milliseconds at which the text should be typed in.
Play in Loop: Should the content be played more then once?
Show Cursor: Should the fake "cursor" shown while it's typing?
Sentences: The content that should be typed in. Can be only one or multiple texts.
See it in action
This is the first Sentence
This is the Second one
A way faster one
Way way way faster
One sentence with hidden Cursor
Generated HTML (Outline)
<div class="mame-typed-text" style="..">
<div class="typed" data...>
<div class="typed_strings">
<!-- For SEO -->
<h2>First sentence</h2>
</div>
<!-- The typing content -->
<h2>F |</h2>
</div>
</div>
Style / CSS Selectors
.mame-typed-text {
/* All typed text elements */
}
.mame-typed-text .typed hX {
/* The typed in text */
}
JavaScript
The Typed Text uses Typed.js, an open source JavaScript library.
