Efficient User

Welcome to another CSS post. In this post, we will discuss on how we can add baffle effect to a text in HTML document using library.

Baffle.js is a tiny JavaScript library for obfuscating and revealing text in DOM elements.

Installation

Add the library from CDN in the top of HTML document.

<script src="<https://cdn.jsdelivr.net/npm/baffle@0.3.6/dist/baffle.min.js>"></script>

Add text

Lets create a paragraph element to show some text which we are going to use to add effect later.

<p class="effect">
    Hello, world..
</p>

Some CSS magic

Here is some CSS magic to add in our document to have some decent look. Basically just aligning the content to center.

body {
    width: 90%;
    height: 90vh;
    background-color: pink;
    display: flex;
    justify-content: center;
    align-items: center;
}

.effect {
    font-family: 'tahoma';
    font-weight: 800;
    font-size: 58px;
}

Baffle configuration

Lets, add the baffle js configuration to apply the effect at the end of document with the help of script tag.

<script>
    // With a CSS selector
    const b = baffle('.effect');
    b.set({
        character: '>▓▒ /█▒</ >▒░>▒ █<░ ░█▒░> ▓░/▒ ▒>░ █<▒▓ ▓▒>░',
        speed: 120
    });

    // Start obfuscating
    b.start();
    
    // Reveal text
    b.reveal(5000);
    
    // Stop obfuscating
    b.stop();

</script>

Here, we have passed the CSS selector which targets the text that needs to obfuscated.

With baffle instantiated, you can start your instance with the start() method, stop it with stop(), or reveal it with reveal().

That’s it, we are done. We can see the changes in the browser.

Happy Coding!

Full Demo:

To get latest updates you can follow or subscribe! #peace