typewrite.js
v0.1.2
Published
A flexible typewriter simulator written in plain Javascript, well tested using Mocha, Chai, Karma and Istanbul - Released under MIT license
Downloads
9
Maintainers
Readme
typewrite.js
A flexible typewriter simulator written in plain Javascript, well tested using Mocha, Chai, Karma and Istanbul. Demo
Install
npm install typewrite
Or download typewrite.min.js.
After that just add the script to your HTML document and start typewriting...
<span id="typewrite"></span>
<script src="js/typewrite.min.js"></script>
<script type="text/javascript">
typewrite('#type')
.setDelay(100, true)
.type('lOREM IPSUM ')
.setDelay(50, false)
.pause(5)
.clear()
.setDelay(50, true)
.type('Lorem ipsum dolor sit amet, consetetur sadipscing elitr.\nSEd ')
.setDelay(100, true)
.pause(5)
.backspace(3)
.type('ed diam nonumy eirmod tempor invidunt ')
.pause(10)
.setDelay(75, true)
.type('\nut labore et dolore magna aliquyam erat.');
</script>
If you want to add an animated blinking cursor, just add the following CSS rules:
.typewrite-cursor{
font-weight: 400;
opacity: 1;
-webkit-animation: blink 0.95s infinite;
-moz-animation: blink 0.95s infinite;
-ms-animation: blink 0.95s infinite;
-o-animation: blink 0.95s infinite;
animation: blink 0.95s infinite;
}
@-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-ms-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-o-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
API
Each of the following methods return a typewrite
object which allows method chaining.
typewrite
object typewrite(DOMString/DOMElement element)
Returns a typewrite
object which provides the methods listed below. The element
argument can be either a selector or a DOM element. This argument is needed to identify the destination of the animation. This method is the starting point for a typewriter simulation.
Example
var tw = typewrite('#type');
type
object type(string text)
Types the value of text
.
Example
typewrite('#type').type('Lorem ipsum');
backspace
object backspace([number count])
Backspaces a number of characters provided by count
. If count
is omitted, only the last character will be backspaced.
Example
typewrite('#type').type('Lorem ipsum').backspace(3);
clear
object clear()
Backspaces all characters.
Example
typewrite('#type').type('Lorem ipsum').clear();
setDelay
object setDelay(number delay, [boolean humanize])
Sets the number of milliseconds that each character should be delayed by. The delay
argument accepts any positive decimal number. If the humanize
argument is set to true
, the delay is being humanized by adding a random amount of milliseconds. humanize
defaults to true, if omitted.
Unless this method is being called, the delay defaults to 100 and is being humanized.
Example
typewrite('#type').setDelay(100).type('Lorem ipsum').setDelay(50, false).clear();
pause
object pause(number time)
Pauses for an amount of time, which is being calculated by the time it takes to type a character (set on setDelay()
) multiplied by time
which accepts a positive decimal number.
Example
typewrite('#type').setDelay(100).type('Lorem ipsum').setDelay(50, false).clear();
then
object then(function callback)
Execute function callback
asynchronously.
Example
typewrite('#type').type('Lorem ipsum').then(alert.bind(window, 'The end.'));
Development
The following gulp tasks are provided.
Compress
gulp compress
Compress js/typewrite.js and copy to js/typewrite.min.js.
Test
gulp test
Execute Mocha/Chai tests once in several browsers using Karma and process code coverage recording using Istanbul.
gulp test:chrome
Execute Mocha/Chai tests once in Chrome using Karma and process code coverage recording using Istanbul.
gulp test:firefox
Execute Mocha/Chai tests once in Firefox using Karma and process code coverage recording using Istanbul.
gulp test:Safari
Execute Mocha/Chai tests once in Safari using Karma and process code coverage recording using Istanbul.
gulp test:Opera
Execute Mocha/Chai tests once in Opera using Karma and process code coverage recording using Istanbul.
gulp test:ie
Execute Mocha/Chai tests once in Internet Explorer using Karma and process code coverage recording using Istanbul.
TDD
gulp tdd
Watch changes to js/typewrite.js or test/tests.js, execute Mocha/Chai tests immediately in Chrome using Karma and process code coverage recording using Istanbul.