Add Typing Effect To Existing Text - jQuery TyperText.JS

Add Typing Effect To Existing Text - jQuery TyperText.JS

TyperText.JS is a super simple jQuery text animation plugin that outputs your text character per character to simulate a text typing effect on the page.

1. Place the jQuery TyperText.js plugin after jQuery library but before you close the body tag.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="typerText.js"></script>

2. The plugin will automatically apply the text typing effect to the text container with the CSS class of 'content'.

<div class="content">
  jQuery TyperText.JS Plugin Demo
</div>

3. You're also able to apply the text typing effect to any container you specify.

<div class="anotherContent">
  jQuery TyperText.JS Plugin Demo
</div>
$( document ).ready(function() {
  $('.anotherContent').typertext();
});

4. To output the text line by line, add the newline character /s/ to your text as these:

<div class="content">jQuery TyperText.JS /s/ /s/ A Text Animation Plugin /s/ /s/ Created By DmitryPustovit /s/ /s/ Featured On jQuerySc
<!-- Output -->
jQuery TyperText.JS
A Text Animation Plugin
Created By DmitryPustovit
Featured On jQueryScript.Net

This awesome jQuery plugin is developed by DmitryPustovit. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 24.04.2018
  • Source