Cree efectos en cascada fácilmente con CascadeJS

Las animaciones de lujo son una moneda de diez centavos por docena en la web. Se están volviendo más fáciles de crear con toneladas de increíbles. bibliotecas de animación.

Cascade.js es una biblioteca más para agregar a la lista, y es definitivamente una única. Con Cascade, puedes diseñar efectos de animación personalizados usando letras en cascada en texto o elementos en cascada en un contenedor principal.

Esta biblioteca tiene sin dependencias; se ejecuta en JavaScript clásico. Puede instalarlo a través de npm, Bower o descargando una copia directamente desde GitHub.

Para hacer que CascadeJS funcione, necesito dos archivos: un archivo CSS y un archivo JavaScript. Ambos vienen empaquetados con versiones minificadas para ahorrar algunos KBs en tamaño de página.

Cada elemento en cascada se descompone en partes separadas que animar individualmente mediante elementos. Estos son agregado dinámicamente, para que no tengas que cambiar nada en tu HTML.

Pero, necesitarás configurar el fluir() función en su archivo, después de seleccionar cualquier elemento que desee animar.

Puedes en realidad usa jQuery con esta biblioteca si quieres, sin embargo es no requerido. Por lo tanto, si prefiere seleccionar elementos con jQuery, entonces puede utilizar ese lugar..

Aquí está un fragmento de vainilla JavaScript de la demo del sitio principal:

Puedes pasar el fluir() elemento con sin parámetros, o tu puedes configúralos todos tú mismo. Se necesita ocho parámetros opcionales para editar el estilo de animación, tiempo, duración y clases de CSS opcionales.

CascadeJS tiene otra función llamada fragmento() lo que te permite separar letras (o elementos) en contenedores separados, sin animarlos. Puedes usar esta función para color y texto de estilo en la página apuntando a cada letra individual en una palabra. Bastante guay cierto?

Todos muestras de código están disponibles abiertamente en la página principal de la biblioteca, por lo que puede copiar / pegar y modificar por su cuenta. Pero, también encontrarás el documentación en la página de GitHub si está buscando una manera más clara de comenzar.