Baffle.js — bewilder that text!

Baffle.js — bewilder that text!

Let’s reveal and shock 😲

Alrighty then. If this year’s gonna be like that then let it be. After writing down my thoughts to the inhuman text library BlotterJS previously, I found another weird JavaScript library at the start of this year. This time it’s more about revealing the text rather than making it dance for no reason. And yes, as always it’ll be super cool. 😉

What will I make?


How about that?

What is this man?

Baffle.js is a really small and powerful JavaScript library to reveal the text in the DOM elements. Oh, this not just ‘reveals’, it reveals with a baffling animation as if the text got high on drugs…

If we were to believe its documentation, this library is around 1.8kb in size and that’s enough for me and (I hope) others to try this out for fun or to use it in one of your projects. Let me start by providing you with some of its features straightway:

  • Tiny (~1.8kb)
  • Super easy to use
  • Dependency-free
  • Even supports IE9 (and above)

A word of caution! This library works on node.textContent which is used to represent the text content of a node and its descendants in the DOM structure. Due to this, it’ll eventually flatten any child elements in your markup. Hence, it’s recommended to use this without children.

What will I need? 🛠️

  • H̸a̸m̸m̸e̸r̸ ̸a̸n̸d̸ ̸w̸r̸e̸n̸c̸h̸
  • Your already wonderful JavaScript
  • A text editor. I prefer VS Code.

Ready for some bewilderness?

Installation ⬇

There are two ways here. One is simply by downloading the latest release from their GitHub repo and the second is via NPM. Use the following command in your terminal to start if you prefer the second method:

$ npm install --save baffle

Code 👩‍💻

We’ll just grab its <script> tag from jsDelivr. Start by adding it to the <head> of your HTML markup. Create a <div> with class=”container” and inside this we’ll make its child class as data which will contain the actual text to reveal. Are you done with adding the text? Now comes the real treat. 😋

Start a new <script> and follow these steps:

  1. Declare a new variable, say text and set it to call the baffle() method. Inside this, pass on the “.data” which targets our text.
  2. Next step is to set a few of its properties. Baffle’s set() method takes in an options object which can be its speed and the characters. The speed is technically the frequency at which BaffleJS updates your text. This is in milliseconds, so watch out for precise numbers here! The characters are any other character(s) such as ‘AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz~!@#$%^&*()-+=[]{}|;:,./<>?’ which it takes by default. So, yes it can be anything including letters, symbols or numbers and even emojis! 🙌 These characters will show up when the page loads and slowly change into your actual text stored in the data class. In my case, I’ve used this: █▓█ ▒░/▒░ █░▒▓/ █▒▒ ▓▒▓/█ ░█▒/ ▒▓░ █<░▒ ▓/░> 🤷‍♂️
  3. At last, we need to invoke the start() and reveal() methods so that the bewilderness actually works. Note that the reveal() method takes in the duration and delay parameters. The default value here is not scary, it’s zero.
  4. Add some easy styling like giving it a black colored background and font sitting at the center of the page and you’re done! 🎉

Here’s the JavaScript code for the above steps:

Where to next? 🤔

Well, this was too small and fast, right? BaffleJS can be more exciting. You can start your instance with the start() method, stop it with the stop() method whenever you want. Plus, you can also call thetext() method any time to change the underlying text of the instance you define. If you use its once() method, you can just make it reveal just once.

Feeling adventurous? Visit the following links to learn more and baffle everyone!


JavaScript Library To Obfuscate And Reveal Text – baffle | CSS Script

Liked this story? Feel free to clap and motivate me to write more and better. Did I miss something? Any suggestions? The comment box below serves the exact purpose!

✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurston Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.

Baffle.js — bewilder that text! was originally published in codeburst on Medium, where people are continuing the conversation by highlighting and responding to this story.

Leave a Reply

Your email address will not be published. Required fields are marked *