Hace tiempo que quise publicar un articulo interesante que leí en el Blog de David Walsh, de Julian Shapiro quien es un programador de clase mundial, como lo describen en el blog. Pero por fin me di mi tiempo para escribir este tutorial (traducir y resumir) sobre este efecto de animación que muy pocos utilizan. Aunque la verdad creo que no lo utilizan de forma independiente, ya que muchas veces los Templates/Plantillas ya vienen con este efecto integrado, que es muy atractivo como el efecto parallax que trataremos mas adelante en un futuro, pero no tan lejano, articulo en JavaScript.

La animación textual es raramente empleada en las páginas web, su uso es una manera fácil de impresionar a los usuarios. Eso es precisamente lo que hace que este tema tan divertido aprender: las técnicas subyacentes son fáciles de programar, pero los resultados se sienten increíblemente sorprendentes y complejos para el usuario.

El enfoque estándar para animación de texto

Los elementos HTML estándar que los sitios usan – divs, tables, etiquetas de anclaje, y similares- son los componentes de nivel más bajo de una página web que se le puede dar estilo. En consecuencia, estos son los componentes de nivel más bajo que se pueden animar.

El Texto no constituye un elemento en sí mismo; un bloque de texto es designado por el navegador como un nodo de texto, que es un componente no estilable (osea que no se le puede dar estilo por si solo), de menor nivel que debe ser contenido por un elemento. Para complicar aún más las cosas está el hecho de que el navegador no subdivide los nodos de texto en componentes gramaticales; no hay manera de acceder a las letras individuales, palabras o frases.

En consecuencia, para animar texto de una letra, palabra o frase base, usted tiene que romper cada nodo de texto en nodos de texto separados, y luego envolver cada una de ellas en un nuevo elemento. A continuación, puede animarlos. Pero envolver manualmente texto en elementos span, por ejemplo, es un trabajo tedioso que resulta en mucho HTML.

Entonces no es raro que no se encuentren muchas webs con este tipo de animaciones, pero donde Adobe After Effect saca mucho provecho con sus animaciones. También si prestas atención a las películas futuristas y/o de ciencia ficción muestran efectos similares en sus escenas, con efectos de transición dentro y fuera de la vista. Y esos efectos son lo que se aprenderán en este articulo.

Preparación de los elementos de texto de animación con Blast.js

La herramienta de elección para la animación tipográfica es Blast.js, que cómodamente rompe bloques de texto en caracteres, palabras y frases. A continuación, puede animar las partes resultantes utilizando Velocity y su plugin pack de UI.

NOTA: Puedes obtener Blast.js en Julian.com/research/blast  o Github.

Blast.js tiene tres tipos delimitador para definir los componentes gramaticales a extraer de forma individual: carácter, palabra y frase. Suponga que tiene un div que tiene este aspecto:

<div>
      Hello World
</div>

Si llamamos a Blast en este div la sintaxis javascript seria asi:

$("div").blast({ delimiter: "word" });

el div se convertiria en esto:

<div class="blast-root"><span class="blast">Hello</span>
<span class="blast">World</span></div>

Como se puede ver, BLAST separa el texto en el objetivo div en partes de texto que se envuelven individualmente en elementos span. Si se va a utilizar en su lugar el delimitador character, el resultado habría sido:

<div class="blast-root">
	<span class="blast">H</span>
	<span class="blast">e</span>
	<span class="blast">l</span>
	<span class="blast">l</span>
	<span class="blast">o</span>
	<span class="blast"> </span>
	<span class="blast">W</span>
	<span class="blast">o</span>
	<span class="blast">r</span>
	<span class="blast">l</span>
	<span class="blast">d</span>
</div>

Ahora puedes animar estos elementos span independiente. Antes de sumergirte en la animación de texto, debes aprender más acerca de cómo funciona BLAST para que puedas sacar el máximo provecho de sus características.

BLAST puede identificar URL, y no de separarlas como podrías pensar que hace, también identifica frases, no solo contando los espacios o grupo de palabras, si no por etiquetas y sus delimitadores.

Instalación

BLAST se instala en una página como cualquier otro plugin de JavaScript: incrustar el script adecuado dentro de su página antes de la etiqueta de esta forma:

<html>
	<head>Mi Pagina</head>
	<body>
		Mi contenido.
		<script src="jquery.js"></script>
		<script src="velocity.js"></script>
		<script src="blast.js"></script>
	</body>
</html>

NOTA: BLAST requiere jQuery (o Zepto, o una alternativa jQuery), y por lo tanto debe ser necesario después de jQuery. No importa si se carga BLAST antes o después de Velocity.

Una vez que se carga BLAST, lo utilizan llamando .blast () en un elemento objeto jQuery. Se acepta un objeto opcions como su único argumento:

$element.blast({ option1: value1, option2: value2 });

Opciones disponibles en BLAST:

Opción: Delimiter

La Opción más importante de Blast es delimiter, que acepta "character", "word", o "sentence". Para separar el texto dentro de $element utilizando el delimitador "sentence", el código se vería así:

$element.blast({ delimiter: "sentence" });

Notas que Blast retorna elementos generados envolviendo texto para que el selector de jQuery pueda manipularlos, de esta forma:

$element.blast({ delimiter: "sentence" })
		.css("opacity", 0.5);

La llamada .css() se aplica a elementos individuales, y no a los $element padres que llamaste antes con Blast.

Opción: CustomClass

Blast ofrece dos opciones para hacer más fácil la manipulación de texto: CustomClass y generateValueClass. CustomClass suministrar una clase personalizada (como un valor de cadena) que se asignará a los elementos de envoltura de los nodo de texto.

Supongamos que tenemos el siguiente div y llamamos a Blast de esta forma:

<div>
    Hola Mama
</div>

$("div").blast({ delimiter: "word" , customClass: "miClase" });

El div se convertirá en esto(nota que Blast siempre coloca la clase blast por defecto):

<div>
	<span class="blast myClass">Hola</span>
	<span class="blast myClass">Mama</span>
</div>

Especificar estilos de manera manual ayudaría si se colocan en diferentes partes de la web, se mostrarían de mejor manera de acuerdo al estilo de la pagina en cada sección.

Opción: generateValueClass

generateValueClass toma un valor booleano (verdadero o falso) que indica si una clase única, en forma de .blast-[delimiter]-[textValue], se debe asignar a los elementos de texto generados.

NOTA: Esta opción sólo es aplicable con los delimitadores character y word.

El marcador de posición [delimiter] representa el tipo de delimitador utilizado en la llama, y el marcador de posición [textValue] representa el texto contenido en un elemento individual. Se ve mejor en el siguiente ejemplo:

<div>
    Hola Mama
</div>

$("div").blast({ delimiter: "word" , generateValueClass: true });

El Resultado seria este:

<div class="blast-root">
	<span class="blast blast-word-Hola">Hola</span>
	<span class="blast blast-word-Mama">Mama</span>
</div>

Cuando el delimitador es character, el resultado seria asi:

<div class="blast-root">
        <span class="blast blast-character-H">H</span>
	<span class="blast blast-character-o">o</span>
        ... siguen las demas letras ....
</div>

La opción generateValueClass puede ser utilizada para dar estilo a ciertas palabras resaltantes, como lo hace Chrome cuando realizas búsquedas de texto en un contenido, tu lo podrías utilizar cuando realices búsquedas en un texto en un contenido de un libro o pagina de tu sitio. podrías utilizar este código en sus tres formas de implementar:

// 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;
}

Opción: Tag
Esta opción te permite especificar el tipo de elemento que envuelve a las partes de texto. El valor predeterminado es span, pero se puede especificar cualquier tipo de elemento (por ejemplo, a, div, p). Mira este ejemplo:

<div>
    Hola Mama
</div>

// Usa el elemento "div" para envolver
$("div").blast({ delimiter: "word" , tag: "div" });

El resultado seria este:

<div class="blast-root">
	<div class="blast">Hola</div>
	<div class="blast">Mama</div>
</div>

Esta característica le puede ayudar ya que pueden coincidir con las demás etiquetas que se encuentren en la web, lo que iria bien para que aya una mejor consistencia en su contenido. También te permite especificar estilos como la etiqueta strong, asi seria texto en negrita automáticamente, ya que los div fuerzan al texto a estar en una linea nueva, aunque podría especificar el estilo display con el valor block.

Comando: Reverse
Puedes deshacer Blast sobre un elemento ya convertido pasando false como único parámetro en la llamada. Por lo tanto, si su elemento Blasteado se vería así:

<div class="blast-root">
	<div class="blast">Hola</div>
	<div class="blast">Mama</div>
</div>

$("div").blast(false);

El resultado seria este:

<div>
    Hola Mama
</div>

Tal vez te preguntes cómo funciona esto: cuando blast se invierte, simplemente destruye los elementos de envoltura generados, a continuación, inserta texto sin formato en los elementos de envoltura como era anteriormente. Ten en cuenta que esto va a romper los controladores de eventos asignados a los nuevos elementos generados por blast, pero no va a romper los controladores de eventos asociados con el código HTML que existía antes de que Blast sea llamado inicialmente.

Ahora también te preguntaras en que momento puedo utilizar esta opción si lo que yo deseo es dar una forma atractiva de leer un articulo o texto, pues te serviría que para cuando terminas de leer todo vuelva a la normalidad así tu código html no se veria abultado, y sobre todo que los buscadores o rastreadores leerían mejor tu texto.

Bien eso es todo, lo que puedo compartir, hay mucho mas efectos los cuales los puedes ver en la siguiente demo, pero también te invito a revisar la web del autor la cual tiene mucho mas información al respecto, Con mas animaciones, que podrás implementar fácilmente, ya sabes si tienes alguna duda puedes dejar tu comentario.