Usually we seen typewriter effect in videos. Thanks to jQuery, provides us best support for video like text effect in HTML. With a jQuery library Typed.js made by mattboldt we can create typewriter text writing effect in HTML.
Forgot the animated videos and enjoy text based typing effect with jQuery, which draw attentions of viewer. Easy to use and having multiple attributes to create stunning typewriter effects.
Include Typed.js in HTML Document:
We are using CDN to include directly the library you can even download it offline here. Most of the developers suggest CDN which let save your bandwidth as well as loading time.
Below is the simple script you can just copy and paste it in your document. Change “First Sentence” and “Second Sentence” with your desired lines. If you need to add more sentences then separate them with comma.
strings: [“First sentence.”, “Second sentence.”],
Typed.new: Holds your “div.element” where your sentences will be displayed. Change with your desired class (if needed).
strings: it’s and array element, holds your sentences. You can expand typewriter effect by adding more sentences.
typeSpeed: Speed argument will be executed for single character. Pass the value in 3 or 4 digit value (i.e. 100, 200, 1000).
HTML Markup for Typewriter Effect:
<div class=”element”> </div>
METHOD 2 : Typewriter Effect with HTML
Thanks Mattboldt introduces SEO friendly version of typing text effect. Actually you need to wrap your each sentence in paragraph tag (i.e. <p></p>).
<p>Typed.js is an <strong>Awesome</strong> library.</p>
<p>It <em>types</em> out sentences.</p>
Typed-string: Div with id of “typed-string” we put our sentences in paragraphs inside this DIV.