📜 Módulo 7: Scrollytelling

Usando Bootstrap + Intersection Observer

Bootstrap 5.3 Intersection Observer Cards y Grid

Capítulo 1: El Comienzo

El contenido aparece al hacer scroll usando la API Intersection Observer combinada con el componente card de Bootstrap.

col-lg-8 mx-auto de Bootstrap crea una columna centrada para ancho de lectura óptimo, mientras que card y shadow-sm proporcionan estilo hermoso y consistente.

Capítulo 2: Desarrollo

Cada sección se desvanece a medida que haces scroll, creando un flujo narrativo.

Las utilidades de espaciado de Bootstrap (mb-5, p-5) controlan el ritmo de la historia, mientras que el sistema de grid asegura que se vea genial en todos los tamaños de pantalla.

Capítulo 3: Transformación

La API Intersection Observer detecta cuando las secciones entran en el viewport.

Bootstrap maneja la estructura y el diseño responsivo, mientras JavaScript agrega las animaciones activadas por scroll. Juntos crean una experiencia de narrativa fluida.

Capítulo 4: Conclusión

Bootstrap + scrollytelling = narrativas atractivas con código mínimo.

La combinación de componentes de Bootstrap y animaciones de scroll personalizadas crea narrativa profesional y accesible que funciona en todos los dispositivos.

Implementación

HTML con Bootstrap

<div class="container">
  <div class="row">
    <div class="col-lg-8 mx-auto">
      <div class="story-section card shadow-sm mb-5">
        <div class="card-body p-5">
          <h2 class="card-title display-5">Capítulo 1</h2>
          <p class="card-text lead">Contenido...</p>
        </div>
      </div>
    </div>
  </div>
</div>

JavaScript (Intersection Observer)

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, {
  threshold: 0.2 // Activar cuando sea 20% visible
});

document.querySelectorAll('.story-section').forEach((section) => {
  observer.observe(section);
});

CSS (Animaciones)

.story-section {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.story-section.visible {
  opacity: 1;
  transform: translateY(0);
}