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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: