Simulate a typewriter/ticker effect on a DOM element.
Features
- Friendly, flexible API offering fine-grained control
- Option to repeat the effect indefinitely
- Option to apply the effect on a custom element property
- Allows pausing and resuming the sequence on-the-fly
- Extensive tests, with 100% coverage
- No dependencies, and super lightweight; just 1.5 KB minified, or 0.8 KB minified and gzipped
For an in-production demo, see the npm front page.
Usage
<body>
<div class="malarkey"></div>
<script src="../dist/malarkey.min.js"></script>
<script>
var elem = document.querySelector('.malarkey');
var opts = {
typeSpeed: 50,
deleteSpeed: 50,
pauseDelay: 2000,
loop: true,
postfix: ''
};
malarkey(elem, opts).type('Say hello') .pause().delete()
.type('Wave goodbye').pause().delete();
</script>
</body>
Custom element property
By default, the effect is applied on elem.innerHTML
. To apply the effect on a different element property (such as the placeholder
attribute of an input
element), pass in opts.getter
and opts.setter
, like so:
<body>
<input type="text" class="malarkey">
<script src="../dist/malarkey.min.js"></script>
<script>
var elem = document.querySelector('.malarkey');
var attr = 'placeholder';
var opts = {
loop: true,
getter: function(elem) {
return elem.getAttribute(attr) || '';
},
setter: function(elem, val) {
elem.setAttribute(attr, val);
}
};
malarkey(elem, opts).type('Say hello') .pause().delete()
.type('Wave goodbye').pause().delete();
</script>
</body>
Pausing and resuming
To pause and resume the sequence on-the-fly, use the triggerPause
and triggerResume
methods:
<body>
<div class="malarkey"></div>
<script src="../dist/malarkey.min.js"></script>
<script>
var elem = document.querySelector('.malarkey');
var opts = {
typeSpeed: 50,
deleteSpeed: 50,
pauseDelay: 2000,
loop: true,
postfix: ''
};
var m = malarkey(elem, opts).type('Say hello') .pause().delete()
.type('Wave goodbye').pause().delete();
document.addEventListener('click', function() {
if (m.isRunning()) {
m.triggerPause();
elem.style.color = 'red';
} else {
m.triggerResume();
elem.style.color = 'black';
}
});
</script>
</body>
Note that here, we toggle between calling triggerPause
and triggerResume
on every click
event.
API
In the browser, malarkey
is a global variable. In Node, do:
var malarkey = require('malarkey');
var m = malarkey(elem [, opts])
Initialises the typewriter/ticker effect on elem
with the given opts
settings.
-
elem
— A DOM element. -
opts
— An object literal:Key Description Default loop
Whether to repeat the entire sequence false
typeSpeed
Time in milliseconds to type
a single character50
deleteSpeed
Time in milliseconds to delete
a single character50
pauseDelay
Delay in milliseconds to pause
2000
postfix
A string appended to any str
passed totype
anddelete
''
getter
A function to get the current value of elem
Returns elem.innerHTML
setter
A function to assign a new value to elem
Assigns to elem.innerHTML
m.type(str [, speed])
Type the str
at the given speed
.
speed
— Defaults toopts.typeSpeed
.
m.delete()
Delete the contents of elem
, one character at a time, at the default speed.
m.delete(str [, speed])
Delete the given str
, one character at a time, at the given speed
.
str
—null
, or a string. Ifnull
, deletes every character inelem
. Else deletesstr
fromelem
if and only ifelem
ends withstr
.speed
— Defaults toopts.deleteSpeed
.
m.delete(n [, speed])
Delete the last n
characters of elem
, one character at a time, at the given speed
.
n
— An integer. If-1
, deletes every character inelem
. Else deletes the lastn
characters ofelem
.speed
— Defaults toopts.deleteSpeed
.
m.clear()
Clear the contents of elem
.
m.pause([delay])
Do nothing for delay
.
delay
— Defaults toopts.pauseDelay
.
m.call(fn)
Call the given fn
, passing it elem
as the first argument.
fn
— Can be asynchronous. We must invokethis
within this function to signal that it has finished execution.
m.triggerPause([fn])
Pauses the sequence. Calls the given fn
when the sequence has been paused, passing it elem
as the first argument.
m.triggerResume()
Resumes the sequence immediately. Has no effect if the sequence is already running.
m.isRunning()
Returns true
if the sequence is currently running. Else returns false
.
Installation
Install via npm:
$ npm i --save malarkey
Install via bower:
$ bower i --save yuanqing/malarkey