baffle.js

A tiny (~1.8kb) javascript library for obfuscating and revealing text in DOM elements.

Source Download Demo npm/baffle
// 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);
});

Installation

To get baffle, either download the latest release and include it in your markup (window.baffle), or install with NPM.

$ npm install --save baffle

Basic Usage

With 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
});

Methods

A baffle instance has six methods, all of them chainable.

Options

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
    });

Available Options

Demo

The quick brown fox jumps over the lazy dog.

Browser Support

Please report any issues you come across.

License MIT
Made By Cam Wiegert
Inspired By Oak