Giving a typewriter effect to your text
Sooraj Gupta Novemeber 2020
A simple way to make any text into a typewriter. The following are some of typewriter.js's advantages:
Adding typewriter.js to your website
First, download the .zip file and unzip it. Then move this unzipped folder into the folder of your website
Download
In your html file, place the following into the last line of the <head> section
<link href = "typewriter/typewriter.css" rel = "stylesheet">Then, place the following into the last line of the <body> section
<script src = "typewriter/typewriter.js"></script>Finally, locate the master.js file inside the "typewriter" folder and add this line to the end of the master.js file
Typewriters.init()Incorporating typewriter.js in HTML elements
Take any <a> or <span> tag and use the data-typewriter attribute to add this element to typewriter.js. The typewriting effect can be enabled/disabled by setting this attribute to "on" or "off"
<a data-typewriter = "on">Hello World!</a>Results in:
To change the font specifications for a specific element. Add the data-typewriter-font, data-typewriter-fontsize, and/or data-typewriter-fontweight attributes.
<a data-typewriter = "on" data-typewriter-fontsize = "15px" data-typewriter-fontweight = "700" data-typewriter-font = "PT Sans">Hello World (but small)!</a> Results in:
Changing the default settings
To change the default settings for the font, timing, etc. Make changes to the "settings.js" file
var settings =
{
//Default font-family
"font": "Arial",
//Default font size;
"fontsize": "15px",
//Default Font weight
"fontweight": "300",
//Time to wait at end of typing before deleting
"timer": 40,
//delay between typing each letter
"delay": 40,
//cursor blink time
"cursor": 500
};Adding a sequence of phrases
Similar to the title of this page, multiple phrases can be played in a sequence by adding a ;(semicolon) after every phrase. To change only a section of a sentance simply add another <a> or <span> tag before or after the typewriter text.
<a>Hello </a><a data-typewriter = "on">World!;Earth!;Planet!</a>Results in:
Hello More settings
The effect can play once or repeat indefinitely if you add the attribute data-typewriter-loop and specify it as "loop" or "noloop". The default is a loop
<a data-typewriter = "on" data-typewriter-loop = "noloop">Hello World</a>Results in:
More will be added soon!
Download the .zip file