Typewriter Effect – jQuery Typing Text

Create stunning typing effect with jQuery. No need to make GIF or videos for typewriter effect. Use a simple syntax and enjoy typing effect in Website.

Typewriter text effect using jQuery becomes easy after jQuery typewriter library. Usually we see typewriter effect in videos. Like Sticky Social Media Buttons, video like text effect in HTML can attract viewers towards Website. With Typed.js library we can create stunning type writer text effect in HTML.


Draw attention of viewers with Mattboldt jQuery text animation library and forgot video based typing text effect. jQuery typing text effect library.

Simple and easy to use stunning typing text effects with SEO friendly text effect.


Include Typed.js in HTML Document:

Include typedjs directly from CDN. We recommended usage of  CDN which saves your bandwidth & 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: ["I am 1st sentence.", "I am 2nd sentence."],
 typeSpeed: 0
 });
 });
</script>

Typed.new: Holds your “div.element” where your sentences will be displayed. Change with your desired class (if needed).

strings: Array of Elements holds your sentences. You can expand typewriter effect by adding more sentences.

typeSpeed: Single character animation speed. Pass the value in 3 or 4 digit value (i.e. 100, 200, 1000).

HTML Markup for Typewriter Effect:

Insert HTML markup anywhere in the document so your JavaScript render to the div. Sentences will show up in div with a class element.

<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

Typewriter text effect is SEO friendly as well. Wrap your sentences in paragraph. (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>

The above JS search  for div with typed-string id content in div with and id of typed.

 

 

 

Leave a Reply

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

Offline

Offline
Offline