// Start baffle on any element(s).
let b = baffle('.someSelector').start();
// Take care of some other stuff.
someAsyncFunction(result => {
// Swap in new text and reveal over 1500ms.
b.text(currentText => result.text).reveal(1500);
});
To get baffle, either download the latest release and include it in your markup (window.baffle), or install with NPM.
$ npm install --save baffleWith baffle installed, getting started is as simple as calling baffle() with some DOM elements. Those elements can be in the form of a CSS selector, a NodeList, or a single Node. You can also pass an options object.
baffle operates on node.textContent, so it will flatten any child elements. It's best used on elements without children.
// With a CSS selector
let b = baffle('.headline');
// With a Node
let b = baffle(document.querySelector('.headline'));
// With a NodeList
let b = baffle(document.querySelectorAll('a'));
// With options
let b = baffle('.headline', {
characters: 'abcdefghijklmnopqrstuvwxyz',
speed: 75
});
With baffle instantiated, you can start your instance with the start() method, stop it with stop(), or reveal it with reveal().
// Start obfuscating
b.start();
// Stop obfuscating
b.stop();
// Reveal your text immediately
b.reveal();
// Reveal your text over 1000ms
b.reveal(1000);
You can also call text() at any time to change the underlying text of your instance or set() to change options.
/**
* Text takes a function which receives the current text as its
* only argument, then uses its return value as the new text.
*/
b.text(currentText => currentText + '!');
// Set takes an options object.
b.set({
speed: 100,
characters: '+-•~!=*'
});
// Just pass the options you want to overwrite.
b.set({
speed: 40
});
A baffle instance has six methods, all of them chainable.
baffle.once()Obfuscates each element once, using options.characters.
baffle.start()Starts obfuscating your elements, updating every options.speed milliseconds.
baffle.stop()Stops obfuscating your elements. This won't reveal your text. It will only stop updating it. To reveal it, use reveal().
baffle.reveal([duration], [delay])Reveals your text over duration milliseconds (default: 0), with the option to delay by delay milliseconds.
baffle.set([options])Updates instance options using the passed options object. You can set any number of keys, even while running.
baffle.text(fn)Updates the text in each element of your instance using function fn, which receives the current text as it's only parameter. The value returned from fn will be used as the new text.
An options object can be passed to baffle when instantiated or any time afterward using the set() method.
// On instantiation
baffle('.someSelector', {
characters: 'supercalifragilisticexpialidocious',
speed: 150
});
// After instantiation
baffle('.someSelector')
.start()
.set({
characters: 'supercalifragilisticexpialidocious',
speed: 150
});
options.charactersThese are the characters that baffle uses to obfuscate your text. You can use a string or an array of characters.
Default: 'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz~!@#$%^&*()-+=[]{}|;:,./<>?'
options.excludeThese are the characters that baffle ignores in your text when obfuscating it. You can pass in an array of characters.
Default: [' ']
options.speedThis is the frequency (in milliseconds) at which baffle updates your text when running.
Default: 50