<span class=“blast”>Hello</span>
<span class=“blast”>World</span>
joyce
(Joyce)
#1
As you can see, Blast separated the target div’s text into text parts that are individually
wrapped in span elements. If you were to instead use the character delimiter, the result
would have been:
Click here to view code image
H
e
l
l
o
W
o
r
l
d
You can now animate these span elements independently. Before you dive into textual
animation, however, you’re going to learn more about how Blast works so you can take
full advantage of its powerful features.
How Blast.js works
The goal of this section is to make you comfortable with the prospect of using Blast to
break apart the text on your beloved page. Let’s dive in!
divs, tables, and the other HTML elements that you’re familiar with are called
element nodes. An element node commonly consists of two types of children: additional
element nodes and text nodes (raw text).
Take this element, for example:
Hello World
This div element is composed of two children: a text node (“Hello”) and a span element
node. The span element node contains a child of its own: another text node (“World”).
When Blast is called, it traverses the entirety of the target element’s descendant element
chain to find text nodes. With each text node, Blast executes the RegEx query associated
with the specified delimiter type (character, word, or sentence) to subdivide the
node into new elements, each with its own text node part. Since Blast doesn’t actually
subdivide element nodes—only text nodes—you can safely apply it to the entire page
without worrying about breaking elements’ event handlers and other expected behaviors.
This versatility is crucial when using Blast on user-generated content that is often dirtied
with HTML. (Say, for example, you want to separate the words in a message posted to
your site’s comments section so you can highlight important passages. With Blast, you can
safely do so without concern for breaking the user’s embedded links.)