Animaciones Tipográficas Fáciles: Cómo Manipular Textos con Blast.js y jQuery
CSS y JavaScript brindan acceso a todos los elementos de un documento HTML, por supuesto, también a los textos; sin embargo, esto se limita a títulos y párrafos. Acceder a frases y palabras sueltas no es tan cómodo; a menos que estén envueltos, por ejemplo, con elementos “”. La biblioteca de JavaScript Blast.js hace que las oraciones, las palabras y los caracteres individuales sean accesibles a través de CSS y JavaScript. Esta es una base real para impresionantes animaciones tipográficas.
Cómo funciona Blast.js
Blast.js proviene del bolígrafo digital del desarrollador Velocity.js Julián Shapiro de San Francisco. La licencia MIT es gratuita para proyectos comerciales y personales. No es difícil de usar, pero es posible que necesite algunas explicaciones. Blast.js se basa en jQuery, por lo que debe incorporar ambos en el documento HTML. Luego, el texto se puede preparar fácilmente, de modo que se pueda acceder a cada oración, cada palabra y cada carácter a través de CSS o JavaScript.
$("p").blast({
delimiter: "word"
});
En el ejemplo anterior, todas las palabras dentro de los elementos «
» se envuelven con un elemento ««. Estos elementos “” se clasifican como “explosión”. Otros delimitadores son «oración», que envuelve oraciones con un ««, y «carácter», que cubre caracteres individuales, incluidos los signos de puntuación. Si el texto ya tiene elementos ««, eliminarlos no tendrá un impacto negativo. Si desea utilizar un elemento de envoltura diferente a ««, puede definir el suyo propio etiquetándolo. El elemento “” es, sin embargo, en general, la mejor opción ya que no tiene función semántica. Los puntos, los signos de exclamación y los signos de interrogación se definen como puntuación final de oración. Blast.js reconoce puntos después de abreviaturas y no los interpreta como el final de una oración; sin embargo, esto solo se aplica a las abreviaturas en inglés. Por ejemplo, “eg” no se entiende como puntuación final de oración, mientras que el alemán “z. B.» es. Para evitar una interpretación incorrecta, debe etiquetar un punto como código ASCII dentro de dos corchetes.
<p>This is e{{046}} g{{046}} a sentence.</p>
Blast.js luego se asegura de que el punto se muestre correctamente pero no se interprete falsamente como puntuación final de oración. Si desea tener acceso a ciertas palabras en un texto, puede clasificar cada palabra. La palabra pasa a formar parte del nombre de la clase.
$("p").blast({
delimiter: "word",
generateValueClass: true
});
Si establece el valor de «generateValueClass» en «true», puede resaltar palabras idénticas con CSS o JavaScript.
<p>
<span class="blast blast-word-i">I</span>
<span class="blast blast-word-do">do</span>
<span class="blast blast-word-stuff">stuff</span>
</p>
En el ejemplo anterior, la clase “explosión-palabra-…” se asigna junto con la clase “explosión”. Así, podrías resaltar cada “I” de un texto a través de CSS. No hay distinción entre mayúsculas y minúsculas cuando se asignan clases. Sin embargo, los caracteres especiales como diéresis, letras acentuadas y números entran en las clases.
Tenga en cuenta que los nombres de clase consisten solo en letras y números ASCII, pero no comienzan con un número. Por lo tanto, no se permiten todos los nombres asignados por Blast.js. Es posible que necesite algún reelaboración manual. Para buscar oraciones o palabras por su posición, puede crear ID para cada elemento ««. Para hacerlo, use «generateIndexID» junto con «customClass».
$("p").blast({
delimiter: "word",
generateIndexID: true,
customClass: "text"
});
En el ejemplo anterior, cada palabra envuelta obtiene una identificación compuesta por el nombre de clase definido en «clase personalizada» y un número consecutivo. La clase también se establece en el elemento ««.
<p>
<span class="blast text" id="text-1">I</span>
<span class="blast text" id="text-2">do</span>
<span class="blast text" id="text-3">stuff</span>
</p>
De esta manera, se puede acceder a palabras, oraciones y caracteres particulares a través de su ID. Para deshacer la voladura, simplemente llame «explosión (falso)».
$("p").blast(false);
En el ejemplo anterior, todos los cambios en los elementos «
» se invierten.
Buscar el texto
Además de etiquetar segmentos de texto individuales, Blast.js le permite buscar en el texto ciertas frases de palabras. En este caso, solo los resultados de la búsqueda se envuelven con un elemento “”.
$("p").blast({
search: "stuff"
});
En el ejemplo anterior, cada aparición de la palabra «cosas» está envuelta. De nuevo, no distingue entre mayúsculas y minúsculas. Al usar «buscar», se ignorará la propiedad «delimitador». En lugar de proporcionar un término de búsqueda, puede buscar frases de palabras personalizadas a través del panel o el método «prompt ()».
var search word = prompt("What are you looking for?");
$("p").blast({
search: search word
});
Los resultados de la búsqueda se pueden resaltar fácilmente a través de una hoja de estilo; esto es ideal para una búsqueda individual en su sitio web.
Sin Barreras Gracias a ARIA
No es muy útil en términos de accesibilidad si todas las palabras o incluso todos los caracteres están envueltos en su propio elemento. El uso de «aria» mantiene el texto sin barreras. Esto se logra asignando el texto a través de «aria-label» al elemento principal sin los elementos de envoltura. Las oraciones, palabras o caracteres envueltos individualmente se ocultan para el lector de pantalla a través de «aria-hidden». Si desea renunciar a la accesibilidad y al etiquetado ARIA, establezca el parámetro «aria» en la llamada «blast()» en «falso».
Animaciones con Velocity.js
Con la biblioteca de JavaScript Velocity.js, puede aplicar bellas animaciones a los textos y mostrar palabras o caracteres que Blast.js separó, por ejemplo, a través de fadeIn.
$("p").blast().velocity("fadeIn", {
duration: 500
stagger: 250
});
El ejemplo anterior desvanece sucesivamente todos los elementos «» en medio segundo («duración»). Se agrega un retraso puntual de un cuarto de segundo («escalonar») a los elementos que se mostrarán. Velocity.js proporciona una gran cantidad de efectos de animación. Además de fadeIn, estos son, por ejemplo, efectos de deslizamiento que animan los elementos al revés.
Compatibilidad con navegador
Blast.js funciona con todos los navegadores estándar. Incluso se admite Internet Explorer 6.0. La biblioteca se publica bajo una licencia MIT y se puede utilizar de forma gratuita en cualquier proyecto.
enlaces relacionados
(dpe)
#Animaciones #Tipográficas #Fáciles #Cómo #Manipular #Textos #con #Blastjs #jQuery