Bramus condivide il suo entusiasmo per le animazioni con link a scorrimento, basate solo su HTML e CSS. È inclusa anche un'opzione JavaScript che si integra con WAAPI.
Capitoli:
- 00:00 - Prologo
- 00:15 - Introduzione + Esempio teaser
- 03:41 - Animazioni con link da scorrimento e attivate da scorrimento
- 05:18 - Esempio di base con CSS (sequenza temporale del documento, sequenza temporale di avanzamento dello scorrimento, scroll(), sequenza temporale dell'animazione)
- 12:31 - Esempio di base utilizzando JavaScript (scrollTimeline)
- 14:06 - Sequenze temporali di avanzamento dello scorrimento con nome (nome-linea della sequenza temporale di scorrimento, asse della sequenza temporale di scorrimento)
- 20:31 - Offset della sequenza temporale di avanzamento dello scorrimento
- 25:05 - Elementi di monitoraggio che entrano/escono utilizzando JavaScript (ViewTimeline)
- 31:09 - Elementi di monitoraggio che entrano/escono utilizzando CSS (visualizzazione-nome-sequenza-temporale, visualizzazione-asse-temporale)
- 32:02 - Visualizza riquadri della sequenza temporale di avanzamento
- 33:07 - Visualizzazione degli esempi della sequenza temporale di avanzamento (Flusso di copertura, Apertura/passaggio dell'elenco contatti, Schede sovrapponibili)
- 35:40 - Gioca oggi!
- 38:04 - Epilogo
Risorse:
- Demo Cover Flow (CSS) → https://goo.gle/3SvEQbd
- Demo del flusso di copertura (JS+WAAPI) → https://goo.gle/3F9S62h
- Demo Scorrimento progressi (CSS) → https://goo.gle/3F9S6zj
- Demo sull'avanzamento dello scorrimento (JS+WAAPI) → https://goo.gle/3Sq5nXn
- Presentazione di immagini su Enter Demo (CSS) → https://goo.gle/3F9S8XX
- Visualizzazione immagine alla demo di Invio (JS+WAAPI) → https://goo.gle/3Sto8JK
- Elenco demo degli effetti fly-in + fly-out (CSS) →https://goo.gle/3Svg3UE
- Elenco demo degli effetti fly-in + fly-out (JS+WAAPI) → https://goo.gle/3F9Saix
- Demo della sezione di scorrimento orizzontale (CSS) → https://goo.gle/3SpaDe5
- Demo della sezione di scorrimento orizzontale (JS+WAAPI) → https://goo.gle/3SAbcBz
- Parallasse Cover to Sticky Header, falso (JS+WAAPI) → https://goo.gle/3SKoMCR
Demo Stacking Cards (JS+WAAPI) → https://goo.gle/3VW0wjD
Raccolta con tutte le demo CSS → https://goo.gle/3F9ScqF
Raccolta con tutte le demo JS+WAAPI → https://goo.gle/3F9ScXH
Specifiche delle animazioni con link a scorrimento → https://goo.gle/3F9SduJ
Polyfill di animazioni collegate a scorrimento → https://goo.gle/3SyziN8
Problema WG di CSS "Bring back scroll-Offsets" → https://goo.gle/3SxfE4d
document.timeline → https://goo.gle/3SwNF4u
Altri video nella serie HTTP 203 → http://goo.gle/HTTP203
Iscriviti al canale Sviluppatori di Google Chrome qui → https://goo.gle/ChromeDevs
Inoltre, se ti è piaciuto, potrebbe piacerti il podcast HTTP203 → https://goo.gle/HTTP203Podcast