EXP 004Preparando
scrollytelling
Cargando estructura00%
EXP 004
Open source / Vanilla stack
Cómo usarlo ↘
Ver guía ↓
Cargando experimento

Open-source scrollytelling template

EXP 004

Una narrativa web donde tu scroll dirige el video. Desliza para probarlo

01 / La premisa

El scroll se convierte en tiempo.

Avanza o retrocede y cada gesto busca un fotograma del MP4. La historia responde a tu ritmo, sin controles extra.

InputProgreso de páginaOutputTiempo del video
01 — Concepto00:00.0
Sincronizando progreso

02 / Cómo funciona

Una escena fija. Un timeline flexible.

Cada capítulo ocupa varias alturas de pantalla mientras el escenario permanece fijo. JavaScript calcula el progreso local de 0 a 1.

La fórmula

progreso × duración

Ese valor actualiza video.currentTime. Los textos usan sus propios rangos data-in y data-out para entrar y salir.

02 — Mecanismo00:00.0
Leyendo el stack

03 / Tecnología

Web nativa, sin framework.

HTML semántico para la estructura, CSS para capas y transiciones, y JavaScript vanilla para medir el scroll y buscar cada fotograma.

Ligero y portable

Un HTML. Cinco videos. Cero build step.

requestAnimationFrame agrupa actualizaciones; playsinline, precarga y soporte para movimiento reducido completan la experiencia.

03 — Stack00:00.0
Abriendo variables

04 / Hazlo tuyo

Cambia medios, copy y ritmo.

Reemplaza los MP4 en /vids, edita cada bloque .copy y conserva los nombres o actualiza sus rutas.

Control fino

Ajusta dónde aparece cada mensaje.

data-in=".20" y data-out=".70" definen el tramo visible. data-trim-in y data-trim-out recortan el video sin editarlo.

04 — Personaliza00:00.0
Preparando publicación

05 / Publica

De carpeta local a GitHub Pages.

Al ser un sitio estático, basta subir index.html y /vids al repositorio. Activa Pages y comparte tu nueva historia.

BaseHTML · CSS · JSDestinoGitHub Pages
05 — Comparte00:00.0

Guía rápida / EXP 004

Tu historia, lista en tres movimientos.

01 / CLONA

Descarga la base

Clona el repositorio o descarga el ZIP. No necesitas instalar dependencias ni ejecutar un compilador.

index.html + /vids
02 / ADAPTA

Cambia la historia

Sustituye videos y textos. Reubica cada bloque con las clases left, right, center o bottom.

03 / PUBLICA

Compártelo

Prueba en móvil, comprime tus MP4 y publica la carpeta como sitio estático en GitHub Pages.

Settings → Pages

Una base, muchas direcciones

¿Qué vas a contar?

EXP 004 funciona mejor cuando el movimiento explica algo: un proceso, una transformación, un producto o una idea.

  • Campañas sociales
  • Landing pages
  • Portafolios
  • Lanzamientos
  • Historias editoriales
  • Casos de estudio
  • Prototipos
  • Educación
Repetir experiencia ↑