Bramus comparte su entusiasmo por las animaciones con vínculo de desplazamiento que solo funcionan con HTML y CSS. También se incluye la opción de JavaScript que se integra con WAAPI.
Capítulos:
- 00:00: Prólogo
- 00:15 - Introducción + ejemplo de avance
- 03:41 - Animaciones vinculadas a desplazamientos frente a animaciones activadas por desplazamiento
- 05:18 - Ejemplo básico con CSS (cronograma del documento, cronograma del progreso del desplazamiento, desplazamiento(), cronograma de animación)
- 12:31 - Ejemplo básico con JavaScript (ScrollTimeline)
- 14:06: Cronogramas del progreso del desplazamiento con nombre (nombre del cronograma de desplazamiento, eje de cronograma de desplazamiento)
- 20:31: Compensaciones del cronograma del progreso del desplazamiento
- 25:05: Seguimiento de los elementos a medida que ingresan o salen con JavaScript (ViewTimeline)
- 31:09: Realiza un seguimiento de los elementos a medida que ingresan o salen con CSS (nombre-del-cronograma-vista, eje de la línea de tiempo)
- 32:02: Las inserciones del cronograma del progreso de visualización
- 33:07: - Ejemplos del cronograma del progreso de visualización (flujo de portada, vuelo flotante de la lista de contactos, tarjetas apiladas)
- 35:40: ¡Juega hoy mismo!
- 38:04: Epílogo
Resources:
- Demostración del flujo de portada (CSS) → https://goo.gle/3SvEQbd
- Demostración del flujo de portada (JS+WAAPI) → https://goo.gle/3F9S62h
- Demostración del progreso del desplazamiento (CSS) → https://goo.gle/3F9S6zj
- Demostración del progreso del desplazamiento (JS+WAAPI) → https://goo.gle/3Sq5nXn
- Demostración de imagen en Enter (CSS) → https://goo.gle/3F9S8XX
- Demostración de imagen en la demostración de Enter (JS+WAAPI) → https://goo.gle/3Sto8JK
- Demostración de los efectos de vuelo de entrada y salida (CSS) →https://goo.gle/3Svg3UE
- Demostración de los efectos de vuelo de entrada y salida (JS+WAAPI) → https://goo.gle/3F9Saix
- Demostración de la sección de desplazamiento horizontal (CSS) → https://goo.gle/3SpaDe5
- Demostración de la sección de desplazamiento horizontal (JS+WAAPI) → https://goo.gle/3SAbcBz
- Portada de paralaje para encabezado fijo, falso (JS+WAAPI) → https://goo.gle/3SKoMCR
Demostración de tarjetas apiladas (JS+WAAPI) → https://goo.gle/3VW0wjD
Colección con todas las demostraciones de CSS → https://goo.gle/3F9ScqF
Colección con todas las demostraciones de JS+WAAPI → https://goo.gle/3F9ScXH
Especificación de animaciones con vinculación de desplazamiento → https://goo.gle/3F9SduJ
Polyfill en animaciones con vinculación de desplazamiento → https://goo.gle/3SyziN8
Problema de CSS WG “Bring back Scroll-Offsets”→ https://goo.gle/3SxfE4d
document.timeline → https://goo.gle/3SwNF4u
Más videos de la serie HTTP 203 → http://goo.gle/HTTP203
Suscríbete a los desarrolladores de Google Chrome aquí → https://goo.gle/ChromeDevs
Además, si disfrutaste este contenido, te recomendamos el podcast HTTP203 → https://goo.gle/HTTP203Podcast