Efectos insignia: parallax, texto y scroll horizontal

Hay tres efectos que reconoces al instante en los sitios premiados: el PARALLAX de capas que crean profundidad, el TÍTULO que se revela palabra por palabra, y las secciones que se desplazan en HORIZONTAL mientras haces scroll vertical. Los tres salen de combinar timelines y ScrollTrigger de formas ingeniosas. Hoy sumas estos trucos a tu caja de herramientas.

Parallax: profundidad por velocidad

// el fondo se mueve MENOS que el scroll (más lento = más lejos)
gsap.to(".capa-fondo", {
yPercent: 30, ease: "none",
scrollTrigger: { trigger: ".hero", start: "top top", end: "bottom top", scrub: true },
});
// el frente se mueve en sentido contrario o más (más rápido = más cerca)
gsap.to(".capa-frente", {
yPercent: -20, ease: "none",
scrollTrigger: { trigger: ".hero", start: "top top", end: "bottom top", scrub: true },
});

Distintos yPercent con scrub = distintas velocidades = profundidad. Es el efecto de portada de medio Awwwards, y son dos tweens.

Texto palabra por palabra

El título que aparece palabra a palabra se hace en dos pasos: PARTIR el texto en <span> por palabra, y animarlos con stagger:

Baja hasta el título y míralo armarse palabra por palabra. El truco del display: inline-block en .palabra es imprescindible: sin él, el y no tendría efecto (los span en línea no aceptan transform vertical). Para partir por LETRAS en vez de palabras, el mismo patrón con split("").

Secciones horizontales

El "scroll vertical mueve el contenido en horizontal" combina pin (fijar la sección) con un tween de xPercent en scrub:

const paneles = gsap.utils.toArray(".panel");   // los 4 paneles horizontales
gsap.to(paneles, {
xPercent: -100 * (paneles.length - 1),   // desplaza toda la fila
ease: "none",
scrollTrigger: {
  trigger: ".contenedor",
  pin: true,              // fija la sección mientras dura el efecto
  scrub: 1,               // atado al scroll (con un pelín de suavizado)
  end: "+=2000",          // cuánto scroll dura la travesía horizontal
},
});

Mientras la sección está "pinneada", tu scroll vertical se traduce en movimiento horizontal de los paneles. Es el efecto de galería/portafolio más pedido, y es una sola timeline con pin + scrub. Lo montarás en el proyecto final.

Mini-reto

Elige UN efecto y móntalo en "El Observador": el título de la portada revelándose palabra por palabra al cargar (sin ScrollTrigger, solo la timeline), O un parallax suave de la imagen de cabecera contra el texto al hacer scroll. Mide el efecto: lo premium es sutil (un yPercent de 15-30, no de 100). Pasarse de parallax marea y grita "amateur" — la contención, otra vez, es el diseño.

Qué sigue

Los efectos grandes ya son tuyos. La próxima lección baja la escala pero sube la clase: las micro-interacciones premium —botones magnéticos que persiguen el cursor, cursores personalizados, imágenes que se distorsionan al hover—. Los detalles pequeños que hacen que un sitio se sienta de otro nivel.