Blast.js - Blast Text Apart to Make it Manipulable

In this post we will discuss about Blast.js by which you can animate text. If you need to animate a single word in a paragraph, you will wrap the word it in the element and then animate it. If you need to animate three words its not a big task. But if you want to animate each character of a paragraph, we need to wrap each character around an element which is a big task. Thats why Blast.js exists.

According to Blast.js, it separates text in order to facilitate typographic manipulation. It has four delimiters built in : charater, word, sentence, and element. Alternatively, Blast can match custom regular expressions and phrases.

The features of Blast.js are :

1. By only only traversing text nodes, all HTML, event handlers, and spacing are preserved. Thus, you can safely apply Blast to any part of your page.
2. Automatic class and ID generation make text selection simple
3. Blast can be fully undone by with a single call.
4. All latin alphabet languages and UTF-8 characters are supported.

Example : In this example we will blast "Hello World!" and will color the characters of the text accordingly.

We have used <h1>Hello World!</h1> as the only html code and of-course a button to run the code. After adding the JQuery and  Blast.js, we will write our JavaScript code inside jQuery ready handler.

$('h1').blast({
        delimiter: 'character'
});

By the above code we want to blast the header string character by character. In this blast function, you will get number of options to choose from.

delimiter - Set the delimiter type(character, word, sentence, element)
search - Perform a search instead of delimiting (true/false)
tag - set the wrapping element type (div, span)
customClass - Add a custom class to wrappers
generateIndexID - Add #customClass - i to wrappers
generateValueClass - Add .blast-word-val to wrapper
stringHTMLTags - Strip HTML before blasting (true/false)
returnGenerated - Return generated elements to stack (true/false)
aria - Avoid speechflow disruption for screenreaders (true/false)

So, we will go through each characters in our code and if it is even number then we will assign red otherwise blue.

characters.each(function (i) {
    if (i % 2 === 0) {
         $(this).css({
             color: 'red'
         });
     } else {
         $(this).css({
             color: 'blue'
         });
     }
});



You can even reverse the changes you have made by passing false as the sole parameter to undo blast on the targeted elements.

$element.blast(false);

Please Like and Share the Blog, if you find it interesting and helpful.

Related articles

• 10 Interview Questions on Nodejs
• 5 Tips for Beginner Nodejs Developers 
• Let us know a little about AngularJS Expressions 
• Create TCP Server in Nodejs 
• How to get list of files in a directory in Nodejs 
• How to navigate through directories in Nodejs 
• Better logging in Nodejs using Bunyan 
• Crossroads : Router for Nodejs Developers 
• Proxies in Nodejs
• How to receive data from the Querystring in Nodejs