A tiny javascript library for obfuscating and revealing text in DOM elements

Overview

baffle.js

A tiny javascript library for obfuscating and revealing text in DOM elements.

camwiegert.github.io/baffle

baffle.js
  • ~1.8kb gzipped
  • Dependency-free 🎉
  • IE9+ ✔️
// 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: '[email protected]#$%^&*()-+=[]{}|;:,./<>?'

options.exclude

These are the characters that baffle ignores in your text when obfuscating it. You can pass in an array of characters.

Default: [' ']

options.speed

This is the frequency (in milliseconds) at which baffle updates your text when running.

Default: 50

Methods

An instance of baffle has six methods, all of which are 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.


You might also like...

Lightweight and fast Particle library written in JavaScript

Spark Particles Lightweight and fast Particle library written in JavaScript Zero Dependencies! Basic example Installation npm i spark-particles --save

May 9, 2022

Javascript library enabling magnifying glass effect on an images

Magnifier.js Javascript library enabling magnifying glass effect on an images. Demo and documentation Features: Zoom in / out functionality using mous

Sep 19, 2022

🎨 Aquarelle is a watercolor effect component. Javascript library by @Ramotion

🎨 Aquarelle is a watercolor effect component. Javascript library by @Ramotion

Aquarelle About This project is maintained by Ramotion, Inc. We specialize in the designing and coding of custom UI for Mobile Apps and Websites. Look

Sep 15, 2022

A JavaScript library for advanced 2D slideshow with WebGL, that provides variety of beautiful effects

gl-slideshow An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power. Shaders are forked from https://gl-transiti

Sep 15, 2022

A JavaScript Typing Animation Library

A JavaScript Typing Animation Library

Live Demo | View All Demos | View Full Docs | mattboldt.com Typed.js is a library that types. Enter in any string, and watch it type at the speed you'

Sep 20, 2022

Javascript library to generate an infinite stream or a burst of image based particles on HTML canvas.

Javascript library to generate an infinite stream or a burst of image based particles on HTML canvas.

spxparticles Stream or a burst of image particles on HTML canvas Simple Javascript library for generating an infinine stream or a burst of image based

Dec 3, 2020

A JavaScript library for advanced 2D slideshow with WebGL, that provides variety of beautiful effects

gl-slideshow An advanced 2D slideshow with WebGL, provides a variety of beautiful effects with GLSL power. Shaders are forked from https://gl-transiti

Sep 15, 2022

A lightweight, efficient and easy-to-use Canvas library for building some cool particle effects.

JParticles · 中文 | English 官网:jparticles.js.org 特效列表 粒子运动 波纹运动 波纹进度条 雪花飘落 线条动画 介绍 JParticles(JavaScript Particles 的缩写)是一款基于 Canvas 的不依赖于其他库的轻量级 JavaScr

Sep 7, 2022

Pure CSS Image Hover Effect Library

imagehover.css A Scaleable & Light Image Hover CSS Library Imagehover.css is a lovingly crafted CSS library allowing you to easily implement scaleable

Sep 17, 2022
⌨️ A tiny library for creating a typing effect on specified text element.

⌨️ TinyTyper - a tiny library for creating a typing effect on specified text element. Demo Size (It's really tiny) Minimized: 2.9KB Gziped: 1.1KB Inst

Korney Vasilchenko 175 Sep 29, 2021
"shuffle-text" is JavaScript text effect library such as cool legacy of Flash.

ShuffleText This is the JavaScript library for text effect such as Flash contents. Setup Script Install <script src="shuffle-text.js"></script> NPM In

Yasunobu Ikeda 93 Jul 3, 2022
A little library that can be used for bursting particles effects on buttons and other elements

Particle Effects for Buttons Bursting particles effects for buttons. By Luis Manuel. Article on Codrops Demo Credits anime.js Basic usage The Particle

Codrops 1.2k Sep 14, 2022
Animated haze distortion effect for images and text, with WebGL.

Animated Heat Distortion Effects with WebGL A tutorial on how to use fragment shaders in WebGL to create an animated heat haze distortion effect on im

Lucas Bebber 288 Aug 23, 2022
Simple styles and effects for enhancing text input interactions.

Text Input Effects Simple styles and effects for enhancing text input interactions. Article on Codrops Demo Integrate or build upon it for free in you

Codrops 964 Aug 27, 2022
PowerModeInput can make your text input box more compelling

PowerModeInput PowerModeInput can make your text input box more compelling This project can make your input box lively. One day I saw a vscode plugin

lindelof 72 Sep 8, 2022
❄️ Add a live frosted glass blur effect over any type of web content, including text.

Frosted Glass ❄️ Add a live frosted glass blur effect over any type of web content, including text. ️️ Demos Install npm install frosted-glass --save

Adrian Carriger 62 Jan 31, 2022
Javascript and SVG odometer effect library with motion blur

SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti

Mike Skowronek 793 Sep 22, 2022
Liquideffect - Javascript Library for creating liquid effect on image and RGB effect on mouse direction.

LiquidEffect Javascript Library for creating liquid effect on image and RGB effect on mouse direction. Demo https://liquideffect.netlify.app/ Dependen

Rohail 8 May 6, 2022
Javascript library to draw and animate images on hover

Hover effect Javascript library to draw and animate images on hover. If this project help you, you like this library or you just want to thank me, you

Robin Delaporte 1.5k Sep 17, 2022