baffle.js
baffle is a tiny (~1.9kb) javascript utility for obfuscating and revealing text in DOM elements.
let b = baffle('.someSelector').start();
someAsyncFunction(result => {
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'll find baffle at window.baffle
. If you're using a module bundler, you'll need to import baffle.
let baffle = require('baffle');
import baffle from 'baffle';
Step 2: Initialize
To initialize baffle, all you need to do is call it with a selector. You'll want to keep a reference to the instance.
let b = baffle('.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()
.
b.start();
b.stop();
b.set({...options});
b.text(text => 'Hi Mom!');
b.reveal(1000);
b.start()
.set({ speed: 100 })
.text(text => 'Hi dad!')
.reveal(1000);