Simulate a typewriter/ticker effect on a DOM element.
- 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.4 KB minified, or 0.7 KB minified and gzipped
For an in-production demo, see the npm front page.
<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>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>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.
In the browser, malarkey is a global variable. In Node, do:
var malarkey = require('malarkey');Initialises the typewriter/ticker effect on elem with the given opts settings.
-
elem— A DOM element. -
opts— An object literal:Key Description Default loopWhether to repeat the entire sequence falsetypeSpeedTime in milliseconds to typea single character50deleteSpeedTime in milliseconds to deletea single character50pauseDelayDelay in milliseconds to pause2000postfixA string appended to any strpassed totypeanddelete''getterA function to get the current value of elemReturns elem.innerHTMLsetterA function to assign a new value to elemAssigns to elem.innerHTML
Type the str at the given speed.
speed— Defaults toopts.typeSpeed.
Delete the contents of elem, one character at a time, at the default 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 deletesstrfromelemif and only ifelemends withstr.speed— Defaults toopts.deleteSpeed.
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 lastncharacters ofelem.speed— Defaults toopts.deleteSpeed.
Clear the contents of elem.
Do nothing for delay.
delay— Defaults toopts.pauseDelay.
Call the given fn, passing it elem as the first argument.
fn— Can be asynchronous. We must invokethiswithin this function to signal that it has finished execution.
Pauses the sequence. Calls the given fn when the sequence has been paused, passing it elem as the first argument.
Resumes the sequence immediately. Has no effect if the sequence is already running.
Returns true if the sequence is currently running. Else returns false.
Install via npm:
$ npm i --save malarkey
Install via bower:
$ bower i --save yuanqing/malarkey
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent