Web Animation using JavaScript: Develop & Design (Develop and Design)

(Joyce) #1

Option: Tag


This option lets you specify the type of element that wraps text parts. The default value is
span, but you can pass in any element type (for example, a, div, p). Consider this
example:


Click here to view code image



Hi Mom

// Use the “div” element as the wrapper tag
$(“div”).blast({ delimiter: “word” , tag: “div” });
The element would consequently turn into this:

Hi

Mom


This feature is useful to ensure that the resulting text elements mimic the structure of
the surrounding HTML. Perhaps nearby sibling elements are all of the div type, in which
case the above example may be appropriate.

You might also want to take advantage of the unique properties offered by different tag
types. strong, for example, automatically bolds text, whereas div forces each text
match to begin on a new line thanks to div’s default display value of "block".


Command: Reverse


You can undo Blast on an element by passing false as the sole parameter into a Blast
call. Hence, if your Blasted element looked like this:



Hi

Mom


and you passed in the following Blast call:
$(“div”).blast(false);
the element would return to its original structure:

Hi Mom

You might be wondering how this works: when Blast is reversed, it simply destroys the
generated wrapper elements, then inserts raw text where the wrapper elements were
previously. Note that this will break event handlers assigned to the new elements
generated by Blast, but it won’t break event handlers associated with the HTML that
existed prior to Blast being initially called.

Reversing Blast in this way is a crucial component of textual animation since the modus
operandi when animating elements on a webpage is to leave things as they were before
you touched them. If, for example, you’ve Blasted apart a sentence in order to animate its

Free download pdf