Animating Text with Blast.js

Animate HTML elements using CSS or JavaScript is more or less an easy task nowadays, thanks to the help of libraries. However, you can only animation the complete existing elements.

This means that if you want to animate a single word in a paragraph, you have to wrap the word in a single element (like a span) and then locate it accordingly.

If you only have one or two span elements like this, this is not a big problem, but what if you want to animate every character in a paragraph? For each character, you have to create a span, which adds a lot of extra markup and makes the text hard to edit. This is why Blast.js exists.

Key Points

• Blast.js is a jQuery plugin that allows animating single characters, words, or sentences in HTML. It does this by wrapping the selected text in a single element (such as a span) and then animations those elements.
• The plugin provides many customization options, including the ability to select wrapping elements, search and highlight specific words or phrases, and control the speed and style of animations. It also ensures that existing elements in the text are not removed or corrupted.
• While Blast.js is powerful, not all users need it, especially those who do not require animated text. However, for those who need animated text, it can be a powerful tool for adding dynamic and interactive elements to web pages.

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 provide some examples so you can understand how to use Blast.js. To use Blast.js and try the following example, you need jQuery as well as the Blast.js file, which can be found on the project website of Blast.js.

As mentioned before, Blast.js allows us to create elements around characters, words, or sentences, but the library is not limited to these options. In the next section, we will see some specific examples to introduce some options. The list of options we will see is not exhaustive; a complete list of available options can be found on the project's website.

Animate our first text

In this first example, we will animate a title, moving them to the right character by character. The only HTML code required is as follows:

<h1 id="gt">></h1>Hello World!>

After including jQuery and Blast.js, the next piece of code in this section will be all in a custom JavaScript file in jQuery's ready handler to make sure the page is ready:

$(function() {
  // 动画代码
});

Now we can animate our title. In our example, using $('h1') to locate the element would be enough, but in your case you would use any suitable selector to locate the element.

Blast.js provides a new method on the jQuery object: .blast(), which accepts a parameter: an object that lists all the options you want to use. In this first example, we will use only one option delimiter: 'character', indicating that we want to animate our title character by character.

If we do not include the parameter, the default value 'word' (rather than "character" will be used, so it will be created around every word (not every character, like we want here) A span.

<h1 id="gt">></h1>Hello World!>

This way, our simple h1 element will be animated and the following DOM will be generated:

$(function() {
  // 动画代码
});

Note that spaces between words have been preserved and are not encapsulated into the span.

Now, we need to retrieve the generated span element. For example, you could try $('.blast'), but there is an easier way. By default, the .blast() method returns the generated elements, so you only need to store them in a variable to retrieve these elements.

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

It is useful to get the generated elements, but not always. So if you want the .blast() method to return the parent element (the main element you are animating) instead of the generated element, you can use another option: returnGenerated. By default, it is set to true; set to false and you will have your parent element:

<h1 id="class-blast-root-gt"> class="blast-root"></h1>
   class="blast">H>
   class="blast">e>
   class="blast">l>
   class="blast">l>
   class="blast">o>

   class="blast">W>
   class="blast">o>
   class="blast">r>
   class="blast">l>
   class="blast">d>
   class="blast">!>
>

Let's go back to our example to animate the elements we collect. We will use jQuery's .each() method to animate each character character by character.

The

.each() method will execute a function for each element stored in the jQuery object. The following are the functions we will use, explained in the comments.

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

Code explanation: First, we use $(this) to retrieve the current element (in this case the current character). We initialize its relative position to zero, and finally, we animation this position.

As shown in the corresponding comments in the code, the .delay() method starts the animation after the defined number of milliseconds, using i * 45, where i is the counter provided by jQuery (we pass it as a parameter). For the first character, i equals 0, so the animation starts immediately, then it equals 1, the second character is animated after 45 milliseconds, and so on.

Our animation is ready and can be run! You can view it in the live example below.

Select your packaging element

By default, a span element is created, which is usually what we want. But sometimes we want to use other elements such as strong, em and even div and p. With Blast.js, this is possible.

To do this, in our next example, we will create a paragraph where each word will be styled with random colors and encapsulated in the em element.

First, we need a function to provide us with a random number. We will use the modified version of Math.random() that is available in native JavaScript.

var chars = $('h1').blast({
  delimiter: 'character',
  returnGenerated: false
});

This new function will give us random integers between min and max, which are passed as arguments into the function.

Now we are ready to color our paragraphs. First, we use delimiter 'word' to animate our paragraphs. We have added a new option: tag, which allows us to indicate the tags we want Blast.js to use to generate elements. We set it to 'em' instead of the default 'span'.

<h1 id="gt">></h1>Hello World!>

Now all our words are encapsulated in the em tag. For each tag, we use jQuery's .css() method and our custom rand() function to define a new color:

$(function() {
  // 动画代码
});

Next, we will add another line of code to explain how to retrieve the initial state of the parent element (i.e. how to remove all these extra generated tags).

To do this, you can assign a false value to the .blast() method. This tells Blast.js that all tags added by previous calls using this method will be removed.

You can view this example in the live version below. Try typing one of the existing words displayed on the page to see the effect.

Search with Blast.js

By default, Blast.js creates elements around every word, character, or sentence in the text. But you can also locate just one word or a group of words: Blast.js and then encapsulate each appearance of the word or phrase into an element. To do this, we will use the search option, whose value is a string, not the delimiter option.

For demonstration, we will create a form with input and submit buttons. The user will indicate the word in the input to search for in a specific paragraph, and then Blast.js will encapsulate the searched terms into the span element.

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

We will do this using the submit event on the form.

<h1 id="class-blast-root-gt"> class="blast-root"></h1>
   class="blast">H>
   class="blast">e>
   class="blast">l>
   class="blast">l>
   class="blast">o>

   class="blast">W>
   class="blast">o>
   class="blast">r>
   class="blast">l>
   class="blast">d>
   class="blast">!>
>

The

directive e.preventDefault(); is used to disable the default behavior of a form, that is, submitting a form.

We use the correct selector to retrieve our paragraphs before applying the .blast() method with the false value for the first time. In this way, if the user has performed other searches before, these searches will be cleared.

Next, we use the .blast() method again, this time the term required for searching. To do this, we use the search option to provide it with the input value. The other two options are not mandatory, but I hope to show you their existence.

The

customClass option allows us to add our own class names to the generated elements. If you looked at the elements generated in the previous example, you will definitely see that they all have the blast class. Using customClass, you can add one or more classes.

The

generateIndexID option is a boolean value. Set to true, it will add an ID to each generated element. To work, it requires the customClass option. Here we choose the class search, so the first generated element will have ID search-1, the second element will have search-2, and so on.

To make our example useful, we need to add some rules in CSS to highlight the generated elements. For example, you can apply the following rules.

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

You can view this example in the live version below. Try typing one of the existing words displayed on the page to see the effect.

What about the existing elements?

After we understand how Blast.js works, there is now an important question to answer. Since we apply the .blast() method to the container, what if this container contains other elements besides the text node? For example, what if we applied the explosion to the following paragraph?

<h1 id="gt">></h1>Hello World!>

Blast.js will not destroy your DOM tree. In this case, the existing span element is not removed and a new span element (with the blast class) is created. By executing $('p').blast() on the above paragraph, we will generate the following result:

$(function() {
  // 动画代码
});

Last: What if this existing span element is actually a span element generated by Blast.js? The answer depends on what you want to do.

Suppose we apply the .blast() method to a paragraph and set the delimiter option to 'word', if we apply the same method again, the previously generated element will be removed before creating a new element, even if The same is true for new calls to use search instead of separators.

However, if you search for a term and call the .blast() method again to search for a new term, the old search will not be removed. In the last example in our previous section, try to remove the .blast(false) call. In this case, the new search will be highlighted, but the old search will also remain highlighted.

Anyway

Blast.js is not useful to everyone, and some may think it is completely unnecessary. However, if you want to animate text, this is probably one of the best options you can find.

As mentioned above, you can find other options to customize the generated elements. You can even choose to disable the ARIA property.

If you have any ideas on how to use it in a creative way, or if you have used this or other tools to animate text, feel free to let us know in the discussion.

FAQs (FAQ) on animating text using Blast.js

How to install Blast.js in my project?

To install Blast.js in your project, you can use npm or Bower. If you use npm, you can install it by running the command npm install blast-text. If you use Bower, the command is bower install blast-text. After installation, you can use the script tag to include it in your HTML file. Remember to include jQuery before Blast.js because it is a jQuery plugin.

What are the different separators in Blast.js?

Blast.js provides four different delimiters: character, word, sentence, and element. The character separator breaks the text into a single character. The word separator breaks the text into words. sentence separator breaks the text into sentences. The element separator breaks the text into HTML elements.

How to use Blast.js to animate text?

To use Blast.js to animate text, you first need to use jQuery to select the text to be animated. You can then use the .blast() method to break the text into fragments. After that, you can use CSS or jQuery to animate these clips.

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 to use custom delimiters in Blast.js?

To use a custom delimiter 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 a separator.

Why does my Blast.js animation not work?

If your Blast.js animation doesn't work, there may be several reasons. First, make sure you include jQuery and Blast.js in your project. Second, check if you use the .blast() method correctly. Third, check whether 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 separator to break down HTML into individual elements and then use CSS or jQuery to animate them.

How to control the speed of Blast.js animation?

The speed of Blast.js animation is controlled by CSS or jQuery animation code, not by Blast.js itself. You can adjust the speed by changing the duration parameter in the 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 to remove the Blast.js effect from my text?

To remove the Blast.js effect from your text, you can use the .unblast() method. This method restores the text to its original state, removing all Blast.js effects.

The above is the detailed content of Animating Text with Blast.js. For more information, please follow other related articles on the PHP Chinese website!