Saltar al contenido

Vivify: la nueva biblioteca de animación CSS más genial para desarrolladores web

Vivify homepage example

Parece que todos los días hay una nueva biblioteca de animación y nuevas herramientas para desarrolladores.

Con la popularidad de CSS3, puedo entender totalmente por qué los desarrolladores están creando tantos recursos. Una nueva biblioteca en particular me llamó la atención recientemente: Vivify.

10 herramientas de animación CSS3 que debe marcar

10 herramientas de animación CSS3 que debe marcar

Como las personas tienden a percibir más fácilmente las cosas que se mueven, las animaciones utilizadas de manera inteligente pueden mejorar la experiencia del usuario … Lee mas

Esta es una biblioteca de animación gratuita construida en CSS y funciona como Animate.css. Sin embargo ofrece animaciones totalmente únicas que no encontrarás en ningún otro lugar.

Ejemplo de página de inicio de Vivify

¿Podrías crear estas animaciones tú mismo desde cero? Definitivamente.

Pero requerirá mucho trabajo y no es el proceso más simple. Recomiendo trabajar con algo como Vivify porque ahorra tiempo en lugar de reinventar la rueda.

Puede ver todos sus estilos de animación prediseñados directamente en la página de inicio.

Allí también encontrará un enlace al repositorio de GitHub donde puede extraer una copia del último script. En este momento, todo lo que necesita es el archivo CSS de Vivify en el encabezado de su página y debería funcionar a las mil maravillas.

Con Vivify también puede configurar retrasos a tus animaciones. De esta forma puede definir cuándo deben ejecutarse y cuándo los ve el visitante.

O puede usar JavaScript para agregar dinámicamente estas clases a los elementos de su página una vez que estén a la vista. Un montón de opciones, muchas funciones y mucho espacio para la personalización.

Lista de animaciones de Vivify

Para comenzar, visite el GitHub principal y descargue el código fuente.

Desde allí, puede probar algunos de los archivos de demostración e incluso obtener una vista previa de algunas de las muestras en el sitio principal. Solo se necesitarán unas pocas líneas de código para que esto funcione y te garantizo que te encantarán tus nuevas animaciones.