La idea del plugin es la de subdividir cada elemento en otros elementos más pequeños, para que por medio de estilos CSS poder hacer el cambio de cada uno de ellos.
El plugin nos permite hace las divisiones en caracteres, palabras o líneas.
Su uso es muy sencillo. Veamos un ejemplo.
Si tenemos el siguiente código html.
<h1 class="fancy_title">Some Title</h1>
Para aplicarle la librería deberíamos de hacerlo de la siguiente manera.
<script src="path/to/jquery-1.4.2.min.js"></script>
<script src="path/to/jquery.lettering.min.js"></script>
<script>
$(document).ready(function() {
$(".fancy_title").lettering();
});
</script>
El resultado que devolvería el plugin sería algo parecido a lo siguiente.
<h1 class="fancy_title"> <span class="char1">S</span> <span class="char2">o</span> <span class="char3">m</span> <span class="char4">e</span> <span class="char5"></span> <span class="char6">T</span> <span class="char7">i</span> <span class="char8">t</span> <span class="char9">l</span> <span class="char10">e</span> </h1>
Como podemos ver, cada letra de la frase se ha separado y ya le podremos asignar estilos independientes a cada una de ellas.
Si la forma en la que quisiéramos dividirlo fuera por palabras, entonces al hacer la llamada a la función lettering, habría que pasarle el parámetro “words”. Si por el contrario fuera por líneas, el parámetro a utilizar sería “lines”.
Vía: Kabytes