var adjustedOpacity = 1 - i/10;
element.style.opacity = adjustedOpacity;});
Instead of iterating opacity values, you could also iterate RGB values to create color-
based gradients. For example, if you increased the blue component of text whose color
initially starts as gray, you’d produce elements that are increasingly rich in blue as you go
from first to last:
Click here to view code image
// Blast the div then iterate through the generated text elements
$(“div”).blast({ delimiter: “character” }).each(function(i, element) {
// Successively increase the blue color component of each element with an
arbitrary formula
var adjustedBlue = i*20;
element.style.opacity = “rgb(0, 0,” + adjustedBlue + “)”;
});
Wrapping up
This is just the beginning of the possibilities created by granular text control. Other
techniques include fine-tuning the coordinates of every letter in a word to produce a
collage effect, or placing words around the circumference of a circle to mimic the
typographic design you might find on a drink coaster.
While these techniques may be well-suited for bold homepage centerpieces, they may
not be appropriate for critical parts of your UI that are subject to repeated user interaction.