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

    Note

This    option  is  applicable  only    to  the character   and word    delimiters.

The [delimiter] placeholder represents the delimiter type used in the call, and the
[textValue] placeholder represents the text contained within an individual element.
Consider the following example:

Click here to view code image

$(“div”).blast({ delimiter: “word” , generateValueClass: true });
The element would turn into this:

Click here to view code image

When Blast is called with the letter delimiter, the element would turn into this
instead:

Click here to view code image

The generateValueClass option is useful when you need to use CSS or
JavaScript to manipulate text matches based on the text contained with them. If, for
example, you used this feature on a book excerpt, you could create a visualization of all
instances of the word “and” by giving elements with the .blast.word-and class a
yellow background:

Click here to view code image
// jQuery implementation
$(“.blast-word-and”).css(“background”, “yellow”);
// Raw JavaScript implementation
document.querySelectorAll(“.blast-word-and”).forEach(function(item) {
item.style.background = “yellow”; });
// CSS implementation
.blast-word-and {
background: yellow;
}
Thanks to this feature, you can painlessly target text matches via either CSS or
JavaScript without having to use messy custom code to individually check the text
contents of each element.