Animating an HTML element with CSS or JavaScript nowadays, with the help of libraries, is more or less an easy task. But you can only animate a full existing element.
This means if you want to animate a single word in a paragraph, you have to wrap the word in an individual element (like a span
) and then target it accordingly.
If you have only one or two span
elements like this, it is not a big deal, but what if you want to animate each character in a paragraph? For every character, you will have to create a span
, which adds a lot of extra markup and makes the text difficult to edit. That’s why Blast.js exists.
What is Blast.js?
Blast.js is a jQuery plugin that allows you to animate individual characters, words, or sentences. In this article, I will present some examples so you can see how to use Blast.js. To use Blast.js and try the examples below, you will need jQuery and of course the Blast.js file, which can be found on the project website for Blast.js.
As mentioned, Blast.js lets us create elements around characters, words, or sentences, but the library isn’t only limited to those options. In the next section, we will see some concrete examples to introduce some options. The list of options we will see is not exhaustive; the full list of available options can be found on the project’s website.
Blasting our First Chunk of Text
In this first example, we will blast a title to animate each character and move them, one by one, to the right. The only HTML code needed is the following:
<h1>Hello World!</h1>
After including jQuery and Blast.js, the next bit of code in this part will all be in your custom JavaScript file inside of jQuery’s ready handler, to ensure the page is ready:
$(function() {
// Animation code
});
Now we can blast our title. In our example, just using $('h1')
to target the element will be enough, but in your case you’ll use whatever selector is appropriate to target the element.
Blast.js offers a new method on the jQuery object: .blast()
, which takes one parameter: an object listing all options you want to use. In this first example, we will use only one option, delimiter: 'character'
, to indicate that we want to blast our title character by character.
If we hadn’t included the parameter, the default value 'word'
would be used (instead of “character”, so a span
would be created around each word (and not around each character as we want here).
$('h1').blast({
delimiter: 'character'
});
With this, our simple h1
element will be blasted and will result in the following generated DOM:
<h1 class="blast-root">
<span class="blast">H</span>
<span class="blast">e</span>
<span class="blast">l</span>
<span class="blast">l</span>
<span class="blast">o</span>
<span class="blast">W</span>
<span class="blast">o</span>
<span class="blast">r</span>
<span class="blast">l</span>
<span class="blast">d</span>
<span class="blast">!</span>
</h1>
Note that the space between the words has been preserved and has not been encapsulated into a span
.
Now, we need to retrieve the generated span
elements. You could try $('.blast')
for example, but there is a simpler way. By default, the .blast()
method returns the generated elements, so that the only thing you have to do to retrieve these elements is store them in a variable.
var chars = $('h1').blast({
delimiter: 'character'
});
Getting the generated elements is useful, but not all the time. So, if you want the .blast()
method to return the parent element (the main one you are blasting) rather than the generated ones, this can be done with another option: returnGenerated
. By default, it is set to true
; set it to false
and you will have your parent element:
var chars = $('h1').blast({
delimiter: 'character',
returnGenerated: false
});
Let’s return to our example to animate the elements we’ve collected. We will animate each character, one by one, thanks to jQuery’s .each()
method.
The .each()
method will execute a function for each element stored in a jQuery object. Here is the one we will use, explained in the comments.
// A character by character animation
chars.each(function(i) {
// initialize position
$(this).css({
position: 'relative',
left: 0
})
// Delay: we don't want to animate
// characters simultaneously
.delay(i * 45)
// Animate to the right
.animate({ left: '50px' }, 300);
});
To explain the code: First, we retrieve the current element (i.e. the current character in our case) using $(this)
. We initialize its relative position to zero and, finally, we animate this position.
As stated in the corresponding comment in the code, the .delay()
method launches the animation after a defined number of milliseconds, using i * 45
, where i
is a counter provided by jQuery (which we pass in as a parameter). For the first character, i
is equal to 0
, so the animation is launched immediately, then it is equal to 1
and the second character is animated after 45 milliseconds, and so on.
Our animation is ready, and it works! You can view a live example below.
See the Pen Blast.js example by SitePoint (@SitePoint) on CodePen.
Choose Your Wrapping Element
By default, span
elements are created and that’s what we’ll want most of the time. But sometimes we would like to play with other elements such as strong
, em
, or even div
and p
. With Blast.js this is possible.
To do that, for our next example we’ll make a paragraph in which each word will be stylized with a random color and encapsulated in an em
element.
First we need a function to provide us a random number. We’ll use a modified version of Math.random()
available in native JavaScript.
function rand(min, max) {
return parseInt(Math.round(min + Math.random() * (max - min)));
}
This new function will give us a random integer between min
and max
, the arguments passed into the function.
Now we are ready to color our paragraph. First we blast our paragraph using the delimiter 'word'
. We add a new option: tag
, which allows us to indicate the tag we want Blast.js to use to generate elements. Instead of the default 'span'
we will set it to 'em'
.
var words = $('p').blast({
delimiter: 'word',
tag: 'em'
});
Now all our words are encapsulated inside em
tags. For each tag, we define a new color thanks to jQuery’s .css()
method and our custom rand()
function:
words.each(function() {
$(this).css('color',
'rgb(' + rand(0, 255) + ',
' + rand(0, 255) + ',
' + rand(0, 255) + ')');
});
Next we will add another line of code to introduce how to retrieve the initial state of our parent element (i.e. how to remove all these extra generated tags).
To do this, you can give the value false
to the .blast()
method. This tells Blast.js that all the tags added with previous calls to this method will be removed.
You can view a live version of this example below.
See the Pen Blast.js Colors demo by SitePoint (@SitePoint) on CodePen.
Note that applying the .blast(false)
method to an element which has not been transformed by Blast.js will do nothing.
Searching with Blast.js
By default, Blast.js will create elements around every word, character, or sentence in your text. But you can also target only one word or one group of words: Blast.js will then encapsulate each occurrence of the word or group of words into an element. To do that, we use the search
option with a string as value, instead of the delimiter
option.
To demonstrate, we will create a form containing an input and a submit button. The user will indicate in the input the word to search in a specific paragraph, and Blast.js will then encapsulate the searched terms into span
elements.
<form method="get" action="search.html">
<p>
<input type="text" name="s" id="s" placeholder="Search">
<input type="submit" value="Go!">
</p>
</form>
We will use the submit
event on our form to execute this.
$('form').submit(function(e) {
$('#awesometext').blast(false).blast({
search: $('#s').val(),
customClass: 'search',
generateIndexID: true
});
e.preventDefault();
});
The instruction e.preventDefault();
is included to disable the default behavior of the form, which is to submit the form.
We retrieve our paragraph with the right selector before applying the .blast()
method the first time with the false
value. That way, if the user previously performed other searches, these will be cleared.
Next we use the .blast()
method again, this time to search the wanted term. To do that, we use the search
option, giving it the value of the input. The two other options are not mandatory, but they can be useful and I wanted to show you that they exist.
The customClass
option allows us to add our own class name to the generated elements. If you looked at the generated elements in the previous examples, you surely saw that they all have the blast
class. With customClass
, you can add one or more classes.
The generateIndexID
option is a Boolean. Set to true
, it will add an ID to each generated element. To work, it needs the use of the customClass
option. Here, we chose the class search
, so the first generated element will have the ID search-1
, the second one will have search-2
, etc.
In order to make our example useful, we need to add some rules in the CSS to highlight the generated elements. For example, you can apply the following rules.
.search {
background-color: #0096ff;
color: #fff;
}
#search-1 {
font-weight: bold;
}
You can view a live version of this example below. Try typing one of the existing words shown on the page to see the effect.
See the Pen Blast.js Search example by SitePoint (@SitePoint) on CodePen.
What About Existing Elements?
There is an important question to answer now that we’ve seen how Blast.js works. Since we apply the .blast()
method to a container, what if this container already contains some elements other than text nodes? For example, what happens if we apply a blast to the following paragraph?
<p>Hello <span>World</span>!</p>
Blast.js won’t break your DOM tree. In this case, the existing span
element won’t be removed, and a new one (with the blast
class) will be created. By executing $('p').blast()
on the above paragraph, we generate the following result:
<p class="blast-root">
<span class="blast">Hello</span>
<span>
<span class="blast">World</span>
</span>
<span class="blast">!</span>
</p>
Finally: what if this existing span
elements is actually a span
generated by Blast.js? The answer depends on what you want to do.
Assuming that we’ve applied the .blast()
method to a paragraph with the delimiter
option set to 'word'
, if we apply the same method again, the previous generated elements will be removed before creating the new ones, even if the new call uses a search instead of a delimiter.
However, if you searched a term, and call the .blast()
method again to search a new term, the old search won’t be removed. In our last example of the previous part, try to remove the .blast(false)
call. In such a case, new searches will be highlighted, but the old ones will stay highlighted too.
In Conclusion
Blast.js won’t be useful for everyone, and some might view it as completely unnecessary. But if you want to animate text, this might be one of the best options you can find.
As said above, you can find other options to customize the generated elements. You can even disable the ARIA attributes if you choose.
If you have any thoughts on how this can be used in a creative way, or if you’ve used this or another tool to animate text, feel free to let us know in the discussion.
Frequently Asked Questions (FAQs) about Animating Text with Blast.js
How Can I Install Blast.js in My Project?
To install Blast.js in your project, you can use npm or Bower. If you’re using npm, you can install it by running the command npm install blast-text
. If you’re using Bower, the command is bower install blast-text
. After installation, you can include it in your HTML file using the script tag. Remember to include jQuery before Blast.js because it is a jQuery plugin.
What Are the Different Delimiters Available in Blast.js?
Blast.js provides four different delimiters: character, word, sentence, and element. The character delimiter breaks the text into individual characters. The word delimiter breaks the text into words. The sentence delimiter breaks the text into sentences. The element delimiter breaks the text into HTML elements.
How Can I Animate Text Using Blast.js?
To animate text using Blast.js, you first need to select the text you want to animate using jQuery. Then, you can use the .blast() method to break the text into pieces. After that, you can use CSS or jQuery to animate the pieces.
Can I Use Blast.js Without jQuery?
No, Blast.js is a jQuery plugin, so it requires jQuery to work. You need to include jQuery in your project before including Blast.js.
How Can I Use Custom Delimiters in Blast.js?
To use custom delimiters in Blast.js, you can pass a regular expression to the .blast() method. The regular expression should match the characters you want to use as delimiters.
Why Isn’t My Blast.js Animation Working?
If your Blast.js animation isn’t working, there could be several reasons. First, make sure you’ve included both jQuery and Blast.js in your project. Second, check if you’re using the .blast() method correctly. Third, check if your CSS or jQuery animation code is correct.
Can I Use Blast.js to Animate HTML Elements?
Yes, you can use Blast.js to animate HTML elements. You can use the element delimiter to break the HTML into individual elements, and then animate them using CSS or jQuery.
How Can I Control the Speed of Blast.js Animations?
The speed of Blast.js animations is controlled by the CSS or jQuery animation code, not by Blast.js itself. You can adjust the speed by changing the duration parameter in your animation code.
Can I Use Blast.js with Other JavaScript Libraries?
Yes, you can use Blast.js with other JavaScript libraries. However, since Blast.js is a jQuery plugin, you need to include jQuery in your project.
How Can I Remove Blast.js Effects from My Text?
To remove Blast.js effects from your text, you can use the .unblast() method. This method restores the text to its original state, removing all Blast.js effects.
Currently a math student, Jérémy is a passionate guy who is interested in many fields, particularly in the high tech world for which he covers the news everyday on some blogs, and web development which takes much of his free time. He loves learning new things and sharing his knowledge with others.