Lección: 74 Poniendo ANIMACIÓN al CAROUSEL VISTA PELÍCULAS de nuestra PÁGINA WEB (LARAVEL y MYSQL) FULLSTACK

74 Poniendo ANIMACIÓN al CAROUSEL VISTA PELÍCULAS de nuestra PÁGINA WEB (LARAVEL y MYSQL) FULLSTACK

Duración: 6 min

Módulo: 🎬 Módulo de Vistas Públicas y Funcionalidades Core Lección 10 de 16

Descripción

Lección 74: Animación del Carrusel en la Vista Principal

Esta lección es un rápido ajuste de frontend para aplicar estilos CSS que hacen que las portadas de las películas se animen cuando el usuario pasa el cursor sobre ellas.

1. 💅 Obtención e Inclusión de Estilos CSS [00:13]

El instructor extrae un código de animación ya trabajado en otra página web y lo transfiere al proyecto.

Extracción de CSS: Se localiza y copia el código de estilo CSS (<style>... </style>) desde el código fuente de una página web externa.
Inclusión: El código copiado se añade al archivo de estilos principal del proyecto, public/css/style.css [00:44].
Clase Creada (.supe): La animación se define en una clase CSS llamada .supe (o similar), que contiene las propiedades para la transición y el estado hover [01:10].
- Al pasar el ratón (:hover), la animación principal es un aumento de escala (transform: scale()), que da la sensación de que la imagen "salta" o resalta.

2. 📝 Aplicación de la Clase a las Portadas [01:29]

Se aplica la clase de animación a las imágenes dentro de la vista index.blade.php.

Etiqueta de Imagen: La clase CSS se agrega a la etiqueta de la imagen de la película: class="[... otras clases] supe".
Implementación Universal:
- La clase se añade primero a las imágenes de la sección "Más Vistos" (la principal) [01:38].
- Luego se copia y pega en las imágenes de las secciones filtradas por categoría (ej. "Acción" y "Animación Kids"), asegurando que todas las portadas tengan la animación [01:57].

3. ✅ Verificación y Próximos Pasos [02:08]

Se verifica el funcionamiento de las películas y se anuncia el siguiente módulo.

Redireccionamiento Corregido: Se confirma que, además de la animación, los enlaces a las vistas de detalle de la película (/pelicula/{id}) funcionan correctamente en todas las categorías del Carrusel.
Anuncio: El siguiente módulo se centrará en la implementación de la funcionalidad de televisión en vivo (IPTV), incluyendo la creación de un reproductor de canales [05:18].

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