NBA LEGENDS - Elsaltoweb

Construye este efecto premium en tu proyecto (sin framework)

Este recurso no es “un slider más”. Es un slideshow fullscreen con un look Deluxe Black UI, transiciones cinemáticas y una barra inferior interactiva (contador, título con animación vertical, indicador de ondas y thumbnails automáticos).

La idea es simple: copias el HTML, pegas el CSS, cargas GSAP y el JS hace el resto. En minutos puedes usarlo como hero, galería, landing o sección “showcase” en tu web.

1) Qué vas a conseguir exactamente

Vista de un slide fullscreen con estética oscura y sensación premium.

Un slider a pantalla completa con transición fluida entre slides y un overlay oscuro para mantener la legibilidad. El resultado final está pensado para verse “caro”: contraste correcto, jerarquía, ritmo visual y una UI inferior que parece una pieza de producto, no un plugin.

2) La UI inferior: el detalle que hace que se sienta PRO

Barra inferior con contador, título animado, indicador y thumbnails.

Esta parte es el “hook” del recurso: una bottom bar con contador, título animado y thumbs. Además, el drag indicator reacciona al hover/cambio de slide para dar sensación de control y movimiento continuo. Es lo que convierte el slider en una experiencia.

3) Navegación completa (click, teclado, scroll y touch)

Navegación del slider con flechas, teclado y gestos.

El ejemplo incluye navegación por: flechas (⟪ ⟫), thumbnails, teclado (← →), y scroll / touch / pointer usando GSAP Observer. Si Observer no está disponible, hay fallback para wheel y swipe. Esto lo hace ideal para integrarlo en una web real sin depender de un framework.

4) Cómo personalizarlo (rápido)

Personalización: títulos, imágenes y branding.

Personalizar es directo:

• Textos: cambia el nombre de serie en .slide-section y edita el array slideTitles.
• Imágenes: reemplaza las URLs en cada background-image.
• Estilo: ajusta variables CSS (radios, sombras, opacidades) para adaptarlo a tu branding.

5) Dónde usar este efecto (ideas prácticas)

Casos de uso: hero, portfolio, showcases.

Casos de uso recomendados: hero de una landing, portfolio de proyectos, galería de producto/branding, “before/after”, o una sección showcase dentro de un sitio de servicios. Si tu web necesita “impacto visual” sin caer en ruido, este patrón funciona.

6) Requisitos técnicos (para que funcione tal cual)

Necesitas cargar GSAP y (opcionalmente) el plugin Observer. El JS ya contempla fallback si no está.

Si lo integras en WordPress, lo ideal es: cargar GSAP por CDN y colocar el script al final del body (o en un archivo encolado).

7) Copia y pega el código (HTML + CSS + JS)

Código listo para copiar: HTML, CSS y JS.

Abajo tienes los tres bloques listos para copiar: HTML (estructura), CSS (Deluxe Black UI), y JS (lógica + animaciones + navegación).

Tip: empieza pegándolo tal cual, verifica que carga GSAP, y luego personaliza textos, imágenes y variables de estilo.

Si quieres que este efecto quede 100% “responsive perfecto”, el siguiente upgrade es eliminar el ancho fijo de updateDragLines() y calcular el ancho real del contenedor con getBoundingClientRect(). Con eso la onda queda clavada en cualquier layout.