es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Anima fácilmente el texto con Textillate.js

En nuestro publicación anterior, te presentamos Animate.css, una impresionante biblioteca de CSS3, que facilita la creación de animaciones CSS3. En esta publicación, presentaremos un plugin jQuery, creado con Animate.css, que puede animar texto, llamado Textillate.js .

Aunque puedes animar texto con Animate.css, solo está animado en su totalidad, no letra por letra . Incluso si puede tener un enfoque de envolver cada personaje a un elemento y animarlos, va a ser problemático y no efectivo. Con este complemento, puede animar cada letra de su texto fácilmente.

Textillate.js divide la animación en 2 componentes, dentro y fuera de la animación . Puede aplicarlos con diferentes animaciones, por separado. Todos los efectos de animación usan los efectos de biblioteca de Animate.css.

Además de Animate.css, Textillate.js también está basado en Lettering.js. Podemos decir que este complemento es la combinación de estas 2 potentes herramientas. Animate.css trabaja en la función de animación, mientras que Lettering.js se centra en la tipografía .

Uso

Textillate.js necesita algunas dependencias antes de que esté listo para su uso. Son Animate.css, Lettering.js y jQuery. Una vez que haya descargado los archivos, inclúyalos en su proyecto, como ese.

Y no te olvides de poner la biblioteca Animate.css en la sección de la cabeza.

Marcado básico

Para comenzar a usar Textillate.js, debe definir una clase de elemento que desea animar, luego agregue el efecto elegido en él . Tenga en cuenta que este complemento solo funciona en texto que contiene elementos, por lo que cualquier elemento que no sea texto no se animará.

Como ejemplo, tenemos un elemento que contiene texto aquí, y una clase de demo, como tal.

Cada una de esta carta se animará.

Llamamos al nombre de clase con la inicialización de Textillate.js, como tal.

El texto ahora se animará.

Opciones de Textillate.js

El código Javascript anterior aplicará solo la configuración de animación predeterminada al texto. Para cambiarlo, hay dos métodos que puedes usar.

1. Primero, ingresando api de datos HTML como el siguiente.

Cada una de esta carta se animará.

data-in-effect define el efecto de entrada del texto. Mientras que para el efecto de salida, puede usar api data-out-effect .

2. También puede agregar las opciones en la inicialización de Javascript Textillate.js como el siguiente código.

Además del effect, hay otras opciones útiles que puede querer usar. Para ver la lista completa de otras opciones, diríjase a la página de documentación.

Pensamiento final

Textillate.js es un plugin muy útil, especialmente cuando desea atraer a los usuarios al texto que desea resaltar más. Puede ser el encabezado de su sitio, servicios, actualizaciones, promociones o cualquier otra cosa. Y para obtener más mejoras, puede combinar Textillate.js con otro complemento como FitText.js designado para texto de visualización gigantesco. Una vez más, recuerda usar la animación en las cantidades correctas.

Archivos PDF: 10 consejos más buscados

Archivos PDF: 10 consejos más buscados

La mayoría de nosotros somos usuarios frecuentes de PDF . Ya sea que lo usemos por trabajo o por asuntos personales, es un formato que se usa ampliamente, ya que es confiable, confiable, accesible y también se adopta a nivel mundial, lo que hace que sea más conveniente para las personas compartir documentos. T

(Consejos de tecnología y diseño)

10 razones por las que debe cambiar al navegador Opera en este momento

10 razones por las que debe cambiar al navegador Opera en este momento

Opera es uno de los navegadores más infravalorados que existen . A pesar de que generalmente aparece en las listas de navegadores más populares, solo una fracción del total de usuarios lo usa (W3schools pone la cifra en alrededor del 1% para 2016). Aún así, las cifras suman aproximadamente 60 millones de usuarios en el escritorio y el doble en Opera Mini para Android.A pe

(Consejos de tecnología y diseño)