The jQuery coolType plug-in
The coolType plug-in adds character by character of a given string in HTML elements with a cool typing effect. The animated effect is like the fast command line typing that you may use for displaying news items or customer reviews, announcements, etc. that a visitor’s eye can catch easily.
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
Update: This plug-in is removed by the developer. However, you may download it from the demo page by clicking/view source and downloading the JS file.
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 etc. text element where you will provide the text to display with typing effect. It should have a unique ID that is referred 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 ot 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 typing effect occurs with default options. Have a look:
See online demo and code
See the complete code in the demo.
A demo of with slow speed and cursorBlinkSpeed options
You may set the speed of typing effect as well as 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>
To learn more about the available options, go to the plug-in page.