How to Add Text Rotator with Typewriter Effect in Your Website

Are you planning to add a simple text rotator to your website? Why don’t you make your text rotator more interesting and catchy with typewriter effect? In this article, we have described how to add text rotator with typewriter effect to your website. Well, let’s get started.

Also read:

• 8 Best jQuery Parallax Plugins to Add Stunning Parallax Effect [Best of the Web]
• How to Add CSS Preloader to Your Website [Tutorial]

Steps to Add Text Rotator with Typewriter Effect in your HTML Page

In this tutorial, we are going to use typer.js to add typewriter effect to text rotator HTML element.

1. Download typer js jquery plugin from Github and copy it to your working directory
2. Include the typer.min.js script in your HTML page along with jQuery library in the header
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="typer.min.js"></script>

3. Add a H1 tag in your HTML document with the class name “typewriter-effect”
   <h1 class="typewriter-effect"></h1>

4. Now let’s assign typer to our H1 tag, add the following jquery code at the end of your HTML document
   <script>
$(document).ready(function() {
$(".typewriter-effect").typer({
strings: [
"Welcome to TechSini",
"This is How Typewriter Effect Looks"
] });
});
</script>


5. That’s it, we are done with adding the typewriter effect to H1 tag, double click on your HTML file to see how typewriter effect looks

If you want to add typewriter effect to some part of H1 heading tag then you can use span tag inside the H1 tag and slightly change the jquery code as $(“.typewriter-effect span”).

Customizing Typewriter Effect

Typer.js comes with some useful options to customize the typewriter effect. Using these plugin options, you can customize the typing speed, backspace speed, backspace delay, repeat delay and start delay etc.

Below is the sample code to customize the typer.js options-

<script>
$(document).ready(function() {
$(".typewriter-effect").typer({
startDelay: 1000,
repeatDelay: 1000,
backspaceDelay: 1000,
strings: [
"Welcome to TechSini",
"This is How Typewriter Effect Looks"
] });
});
</script>


• HTML
• jQuery
• jQuery Plugin