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

(Joyce) #1

Option: Delimiter


Blast’s most important option is delimiter, which accepts "character", "word",
or "sentence". To separate the text within $element using the "sentence"
delimiter, your code would look like this:


Click here to view code image
$element.blast({ delimiter: “sentence” });
Note that Blast returns the generated text wrapper elements to the jQuery selector chain
so you can manipulate them, like this:


Click here to view code image
$element.blast({ delimiter: “sentence” })
.css(“opacity”, 0.5);
The .css() call is applied to the individual text elements, not the parent $element
that you called Blast on.


Option: customClass


Blast provides two options to make text manipulation easier: customClass and
generateValueClass. customClass behaves exactly as you would expect: supply
a custom class (as a string value) to be assigned to the text node wrapper elements.


Suppose you had the following   div and Blast   call:

Click here to view code image



Hi Mom

$(“div”).blast({ delimiter: “word” , customClass: “myClass” });
The div would turn into the following (note how Blast automatically assigns every text
part the "blast" class by default):

Click here to view code image



Hi
Mom

The value in providing a custom class is in differentiating the elements generated by
each Blast call. If, for example, you used Blast in two locations on your page—once in the
header and once in the footer—it might be helpful to assign these two calls different
classes so your subsequent JavaScript code and CSS styles can act on the text elements
appropriately.

Option: generateValueClass


generateValueClass takes a Boolean value (true or false) indicating whether a
unique class, in the form of .blast-[delimiter]-[textValue], should be
assigned to the generated text elements.

Free download pdf