Typewriter Effect – jQuery Typing Text

No further need to edit videos to show typing text effect. Forgot the past and create stunning Typewriter effect with jQuery library TYPED.JS. No need to code furthermore include, change the sentences and just enjoy the typing effect.

Share

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.

<script src=”https://cdnjs.cloudflare.com/ajax/libs/typed.js/1.1.6/typed.min.js”></script>


METHOD 1 : Typewriter Syntax with JavaScript

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.

<script>
document.addEventListener(‘DOMContentLoaded’, function(){
Typed.new(‘.element’, {
strings: [“First sentence.”, “Second sentence.”],
typeSpeed: 0
});
});
</script>

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>

The above div (with a class of element) will be filled with  the sentences written in the JavaScript.


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>).

<div id=”typed-strings”>
<p>Typed.js is an <strong>Awesome</strong> library.</p>
<p>It <em>types</em> out sentences.</p>
</div>
<span id=”typed”></span>

Typed-string: Div with id of “typed-string” we put our sentences in paragraphs inside this DIV.

 

<script>
document.addEventListener(‘DOMContentLoaded’, function(){
Typed.new(‘#typed’, {
stringsElement: document.getElementById(‘typed-strings’)
});
});
</script>

 

 

https://github.com/mattboldt/typed.js

Leave a Reply

Your email address will not be published. Required fields are marked *