baffle.js
A tiny javascript library for obfuscating and revealing text in DOM elements.
- ~1.8kb gzipped :zap:
- Dependency-free :tada:
- IE9+ :heavy_check_mark:
// Select elements and start.
const b = baffle('.someSelector').start();
// Do something else.
someAsyncFunction(result => {
// Change the text and reveal over 1500ms.
b.text(text => result.text).reveal(1500);
});
Getting Started
Step 0: Install
Download the latest release or install with npm.
npm install --save baffle
Step 1: Reference
If you linked baffle directly in your HTML, you can use window.baffle. If you're using a module bundler, you'll need to import baffle.
// CommonJS
const baffle = require('baffle');
// ES6
import baffle from 'baffle';
Step 2: Initialize
To initialize baffle, all you need to do is call it with some elements. You can pass a NodeList, Node, or CSS selector.
// With a selector.
const b = baffle('.baffle');
// With a NodeList
const b = baffle(document.querySelectorAll('.baffle'));
// With a Node
const b = baffle(document.querySelector('.baffle'));
Step 3: Use It
Once you have a baffle instance, you have access to all of the baffle methods. Usually, you'll want to b.start() and, eventually, b.reveal().
// Start obfuscating...
b.start();
// Or stop obfuscating...
b.stop();
// Obfuscate once...
b.once();
// You can set options after initializing...
b.set({...options});
// Or change the text at any time...
b.text(text => 'Hi Mom!');
// Eventually, you'll want to reveal your text...
b.reveal(1000);
// And they're all chainable...
b.start()
.set({ speed: 100 })
.text(text => 'Hi dad!')
.reveal(1000);
Options
You can set options on baffle during initialization or anytime afterward with baffle.set().
// During initialize
baffle('.baffle', {
characters: '+#-•=~*',
speed: 75
});
// Any time with set()
b.set({
characters: '¯\_(ツ)_/¯',
speed: 25
});
options.characters
The characters baffle uses to obfuscate your text. It can be a string or an array of characters.
Default: `'AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz~!@#$%^&*()-+=[]{}