Maquetación Web Dinámica / JavaScript para maquetadores: darle vida al DOM

Reto: una página viva con scroll, navbar y modal

Reto65 min60 XP

El examen de "darle vida al DOM": una landing que se SIENTE moderna. Sus secciones aparecen al bajar, su navbar se transforma al hacer scroll, y un botón abre un modal accesible. Son los tres patrones que verás en casi toda página profesional — y al integrarlos tú, en una sola página, demuestras que ya sabes hacer que una web cobre vida.

Reto

La landing que respira

Media60 min60 XP(×2 sin mirar la solución)

Qué debes construir

Una página de una sección con estos tres comportamientos vivos:

Scroll reveals: las secciones entran con un fade-up al aparecer en pantalla (IntersectionObserver), respetando prefers-reduced-motion.
Navbar inteligente: la barra superior se vuelve .compacta (más baja, con sombra) cuando el usuario deja atrás el hero, y vuelve a su estado grande arriba del todo.
Modal accesible: un botón (ej. "Suscríbete") abre un modal que gestiona el foco (entra al abrir, vuelve al cerrar) y cierra con el botón, con Escape y con clic en el fondo.

Reglas

HTML + CSS + JavaScript, sin librerías.
Reutiliza lo aprendido: IntersectionObserver (lección 6) para reveals y navbar; el patrón de modal accesible (lección 7).
Regla de oro en todo: JS cambia clases/estado, el CSS pinta. Y prefers-reduced-motion respetado en las animaciones.

60:00

Cuando estés listo, arranca el reloj.

El razonamiento — tres comportamientos independientes, un mismo principio:

Cada efecto es "observar y togglear una clase". Reveals y navbar son el MISMO patrón (IntersectionObserver → classList) apuntando a cosas distintas. Una vez lo ves así, no son tres problemas: es uno aplicado tres veces. El modal añade la gestión de foco, pero también termina en "toggle de una clase".
JS decide cuándo; CSS decide cómo. Ni una animación en JavaScript: el fade-up, la sombra del navbar y el fundido del modal viven en CSS. JS solo pone .visible, .compacta, .abierto. Por eso todo es fácil de ajustar y de hacer accesible.
La empatía va incorporada, no pegada al final. prefers-reduced-motion se consulta al construir los observers y vive en el @media del CSS — parte del diseño, no un parche.

La página viva completa:

<header class="navbar" id="navbar">
<span class="logo">Forge</span>
<button class="btn" id="abrir">Suscríbete</button>
</header>

<section class="hero" id="hero">
<h1>Construimos webs que se sienten vivas</h1>
<p>Baja para ver los efectos. Toca "Suscríbete" para el modal.</p>
</section>

<section class="bloque revelar"><h2>Scroll reveal</h2><p>Aparezco al entrar en pantalla, con un fade-up suave.</p></section>
<section class="bloque revelar"><h2>Navbar inteligente</h2><p>Mira la barra de arriba: se volvió compacta al dejar el hero.</p></section>
<section class="bloque revelar"><h2>Todo con clases</h2><p>JavaScript solo alterna clases; el CSS hace la magia visual.</p></section>

<div class="modal" id="modal" role="dialog" aria-modal="true" aria-labelledby="mt" aria-hidden="true">
<div class="dialogo">
  <h2 id="mt">Suscríbete al boletín</h2>
  <p>Cierra con el botón, con Escape o tocando el fondo.</p>
  <button class="btn" id="cerrar">Listo</button>
</div>
</div>

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui; background: #f8fafc; }
.navbar { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; background: rgba(255,255,255,0.92); backdrop-filter: blur(6px); transition: padding 200ms ease, box-shadow 200ms ease; }
.navbar.compacta { padding: 9px 20px; box-shadow: 0 2px 14px rgba(15,23,42,0.12); }
.logo { font-weight: 800; color: #6d28d9; font-size: 18px; }
.btn { padding: 9px 16px; border: 0; border-radius: 8px; background: #6d28d9; color: white; font-weight: 600; font-size: 14px; cursor: pointer; }
.btn:focus-visible { outline: 3px solid #a78bfa; outline-offset: 2px; }
.hero { padding: 60px 20px 90px; text-align: center; }
.hero h1 { margin: 0 0 10px; font-size: 26px; color: #1e293b; }
.hero p { margin: 0; color: #64748b; }
.bloque { max-width: 460px; margin: 0 auto 60px; padding: 24px; background: white; border: 1px solid #e2e8f0; border-radius: 14px; }
.bloque h2 { margin: 0 0 6px; color: #6d28d9; font-size: 18px; }
.bloque p { margin: 0; color: #475569; font-size: 14px; }
.revelar { opacity: 0; transform: translateY(24px); transition: opacity 500ms ease-out, transform 500ms ease-out; }
.revelar.visible { opacity: 1; transform: none; }
.modal { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(15,23,42,0.6); opacity: 0; visibility: hidden; transition: opacity 200ms ease; }
.modal.abierto { opacity: 1; visibility: visible; }
.dialogo { background: white; border-radius: 14px; padding: 22px; max-width: 320px; display: grid; gap: 10px; }
.dialogo h2 { margin: 0; font-size: 18px; color: #1e293b; }
.dialogo p { margin: 0; font-size: 14px; color: #475569; }
@media (prefers-reduced-motion: reduce) {
.revelar, .navbar, .modal { transition: none; }
}

const quieto = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

// 1. SCROLL REVEALS
const items = document.querySelectorAll(".revelar");
if (quieto) {
items.forEach((el) => el.classList.add("visible"));
} else {
const obs = new IntersectionObserver((entries) => {
  entries.forEach((e) => {
    if (e.isIntersecting) { e.target.classList.add("visible"); obs.unobserve(e.target); }
  });
}, { threshold: 0.25 });
items.forEach((el) => obs.observe(el));
}

// 2. NAVBAR INTELIGENTE: vigilar el hero
const navbar = document.querySelector("#navbar");
const hero = document.querySelector("#hero");
const navObs = new IntersectionObserver((entries) => {
entries.forEach((e) => {
  navbar.classList.toggle("compacta", !e.isIntersecting);   // fuera del hero → compacta
});
}, { threshold: 0.1 });
navObs.observe(hero);

// 3. MODAL ACCESIBLE
const modal = document.querySelector("#modal");
const abrir = document.querySelector("#abrir");
const cerrar = document.querySelector("#cerrar");
let previo = null;

abrir.addEventListener("click", () => {
previo = document.activeElement;
modal.classList.add("abierto");
modal.setAttribute("aria-hidden", "false");
cerrar.focus();
});
function cerrarModal() {
modal.classList.remove("abierto");
modal.setAttribute("aria-hidden", "true");
if (previo) previo.focus();
}
cerrar.addEventListener("click", cerrarModal);
modal.addEventListener("click", (e) => { if (e.target === modal) cerrarModal(); });
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && modal.classList.contains("abierto")) cerrarModal();
});

Autoevaluación: ¿las secciones aparecen al bajar (y se ven de una con reduced-motion activado)? ¿El navbar se compacta al dejar el hero y vuelve arriba? ¿El modal abre, gestiona el foco y cierra de las tres formas, todo con teclado? ¿Revisaste que JavaScript no pinte ni un color (solo alterna clases)? Cuatro síes: tu página está viva y es accesible — el estándar profesional.

Qué sigue

Módulo 14 cerrado: sabes darle vida al DOM — seleccionar, reaccionar, renderizar desde datos, y montar los patrones de UI clásicos con accesibilidad. Pero escribiste todo con JavaScript "a secas", y en apps grandes eso se vuelve frágil: un typo en un nombre de propiedad no avisa hasta que rompe en producción. El módulo 15 trae la red de seguridad — TypeScript aplicado a la maquetación: los mismos patrones, ahora con el editor avisándote de los errores ANTES de que ocurran.