The coolType plug-in adds character by character of a given string in HTML elements with a cool typing effect.
The development version of the JS file of the plug-in is 4K.
See the next section for setting up this plug-in with many options.
Developer’s page Download plug-in
Setting up cool typing plug-in?
If you are already using the jQuery library, include the jquery.coolType.js file after that:
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script>
<script type=”text/javascript” src=”js/coolType/jquery.coolType.js”></script>
Using the markup
The markup may be a simple paragraph or div text element where you will provide the text to display with a typing effect.
It should have a unique ID that is referred to in jQuery code for initiating the plug-in:
<p id="coolType-demo" style="display: none"> Text provided here will appear with cool typing in the browser! </p>
Initiate the plug-in:
$(function () {
var text = $('#coolType-demo').text();
$('body').coolType(text);
});
Use the options provided by the demo to customize the typing effect. See the demos below of using it to read more by visiting the developer’s page.
A demo of animated cool typing effect
For the example, the dummy text is given in a div element. No options are used for this demo, so the typing effect occurs with default options.
Have a look:
Complete code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background: #000;
color: #fff;
font-family: Consolas, "Courier New";
padding: 50px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/coolType/jquery.coolType.js"></script>
<script type="text/javascript">
$(function () {
var text = $('#coolType-demo').text();
$('body').coolType(text);
});
</script>
</head>
<body>
<div id="coolType-demo" style="display: none">
Text provided here will appear with cool typing in the browser!
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body
{
background: #000;
color: #fff;
font-family: Consolas, "Courier New";
padding: 50px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/coolType/jquery.coolType.js"></script>
<script type="text/javascript">
$(function () {
var text = $('#coolType-demo').text();
$('#coolType-demo').coolType(text);
});
</script>
</head>
<body>
<div id="coolType-demo" style="display: none">
Text provided here will appear with cool typing in the browser!
</div>
</body>
</html>
A demo of with slow speed and cursorBlinkSpeed options
You may set the speed of the typing effect as well as the cursor blink speed by using the options in jQuery code.
In the following demo, the following options are used:
- typeSpeed: 100,
- inline: false,
- cursorBlinkSpeed: 400
- delayAfterType: 1000
- delayBeforeType: 500
The jQuery code:
<script type="text/javascript">
$(function () {
var msg = 'Text provided here will appear with cool typing in the browser!';
var options = {
typeSpeed: 100,
inline: false,
cursorChar: '█',
cursorBlinkSpeed: 400,
delayBeforeType: 500,
delayAfterType: 1000
};
$('body').coolType(msg, options);
});
</script>