Lección: 12 Comó hacer ANIMACIONES en mi PÁGINA WEB - PLATAFORMA con (LARAVEL y MYSQL)FULLSTACK Animate.css

12 Comó hacer ANIMACIONES en mi PÁGINA WEB - PLATAFORMA con (LARAVEL y MYSQL)FULLSTACK Animate.css

Duración: 6 min

Módulo: 🏗️ Módulo de Fundamentos y Diseño Base Lección 12 de 18

Descripción

🎬 Lección 12: Animaciones en la Web con Animate.css

Esta lección avanzada en el desarrollo frontend tiene como objetivo dotar a los elementos de la página de movimiento y dinamismo mediante la integración de una librería CSS preconstruida. El instructor utiliza Animate.css para añadir animaciones a los botones y títulos, mejorando la experiencia visual del usuario.

1. 🌐 Incorporación de la Librería Animate.css [00:48]

Se explica la herramienta a utilizar y cómo integrarla rápidamente:

Herramienta: Animate.css es una librería que ofrece una gran cantidad de efectos de animación (zoom, bounce, fade, etc.) con solo añadir una o dos clases de CSS [00:49].
Instalación Rápida: La librería se incluye en el proyecto pegando una única línea de código CDN (Content Delivery Network) dentro del tag <head> de la vista Blade [01:33].

2. ⚡ Aplicación de Animaciones Simples [02:06]

Se demuestra el método de uso de la librería, que se basa en la adición de clases CSS a cualquier elemento HTML:

Clases Requeridas: Para activar una animación, se deben añadir dos clases al elemento (ej. el botón de Facebook):
1. animate__animated: Clase base que activa el motor de animación de la librería [02:08].
2. animate__nombredelefecto: Clase específica que define el tipo de movimiento, por ejemplo, animate__fadeInUp para hacer que el elemento aparezca desde abajo [03:07].
Ejemplos Aplicados:
- Se aplica la animación a los tres botones de redes sociales para que aparezcan simultáneamente desde la parte inferior [03:15].
- Se añade un efecto de animación al título principal de la página [03:31].

3. ⏱️ Control de Animaciones con Retraso (Delay) [04:12]

Se introduce una técnica avanzada para que los elementos no aparezcan todos al mismo tiempo, sino con una secuencia controlada:

Control de Tiempo: Animate.css proporciona clases de utilidad para controlar el retraso (delay) entre las animaciones.
Aplicación Secuencial:
- Se aplica la clase animate__delay-1s al primer botón.
- Se aplica animate__delay-2s al segundo botón.
- Se aplica animate__delay-3s al tercer botón.
Resultado Final: Al recargar la página, los elementos aparecen en secuencia (uno por segundo), logrando un efecto mucho más dinámico y pulido que mejora la percepción de la plataforma [05:08].

Apoya este proyecto

Si te gusta nuestro contenido, ¡apóyanos con una donación!

Donar por Airtm Donar por Binance

¡Gracias por tu apoyo! ❤️

Hilari Web