TypeWriting.js
GitHub repo
DEMO
Setup
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="path/to/typewriting.min.js"></script>
I use $('.string').height
to set the cursor height. You could use its line-height to control cursor height.
typewriting()
Put the text you want as first parameter.
With second parameter, you can set some options.
- typing_interval: the interval between each character
- blink_interval: the interval of the cursor blinks
- cursor_color: the color of the cursor
Third parameter is the function after typing effect.
$('.string').typewriting( "Text here", {
"typing_interval": 300,
"blink_interval": "1.5s"
"cursor_color": "white"
}, function() {
console.log( "End." );
});
rewrite()
You could use this function to do the same effect but different text at same element.
$('.string').rewrite( "Another text here", function() {
console.log( "End, 2." );
});
Author
Eddie Wen: m20021991y@gmail.com
GitHub: https://github.com/EddieWen-Taiwan