Bramus compartilha sua empolgação com as animações vinculadas a rolagem, que usam apenas HTML e CSS. Opção JavaScript que se integra à WAAPI também está incluída!
Capítulos:
- 00:00 - Prólogo
- 00:15 - Introdução + Exemplo de teaser
- 03:41 - Animações de rolagem versus acionadas por rolagem
- 05:18 - Exemplo básico de uso de CSS (Linha do tempo do documento, Linha do tempo do progresso de rolagem, scroll(), linha do tempo da animação)
- 12:31 - Exemplo Básico usando JavaScript (ScrollTimeline)
- 14:06 - Linhas do tempo do progresso de rolagem nomeadas (nome da linha do tempo de rolagem, eixo da linha do tempo de rolagem)
- 20:31 - Compensação da linha do tempo do progresso de rolagem
- 25:05 - Elementos de acompanhamento à medida que eles entram/saem usando o JavaScript (ViewTimeline)
- 31:09 - Elementos de rastreamento conforme eles entram e saem usando CSS (view-timeline-name, view-timeline-axis)
- 32:02 - Visualizar encartes da linha do tempo do progresso
- 33:07 - Exemplos de linha do tempo do progresso (fluxo da capa, entrada/saída da lista de contatos, cards de empilhamento)
- 35:40 - Brinque com ele hoje mesmo!
- 38:04 - Epílogo
Resources:
- Demonstração do fluxo do Cover (CSS) → https://goo.gle/3SvEQbd
- Demonstração do fluxo da capa (JS+WAAPI) → https://goo.gle/3F9S62h
- Role Progress Demo (CSS) → https://goo.gle/3F9S6zj
- Role a tela de demonstração (JS+WAAPI) → https://goo.gle/3Sq5nXn
- Revelação de imagem na demonstração de entrada (CSS) → https://goo.gle/3F9S8XX
- Revelação de imagem ao entrar na demonstração (JS+WAAPI) → https://goo.gle/3Sto8JK
- Demonstração de efeito de exibição e deslizamento de lista (CSS) →https://goo.gle/3Svg3UE
- Demonstração de efeito de voo suspenso e suspenso (JS+WAAPI) → https://goo.gle/3F9Saix
- Demonstração de seção de rolagem horizontal (CSS) → https://goo.gle/3SpaDe5
- Demonstração da seção de rolagem horizontal (JS+WAAPI) → https://goo.gle/3SAbcBz
- Capa com paralaxe para cabeçalho fixo, falso (JS+WAAPI) → https://goo.gle/3SKoMCR
Demonstração de cartões empilhados (JS+WAAPI) → https://goo.gle/3VW0wjD
Coleção com todas as demonstrações do CSS → https://goo.gle/3F9ScqF
Coleção com todas as demonstrações de JS+WAAPI → https://goo.gle/3F9ScXH
Especificações de animações vinculadas à rolagem → https://goo.gle/3F9SduJ
Polyfill de animações com rolagem → https://goo.gle/3SyziN8
Problema do CSS WG “Bring back Scroll-Offsets”→ https://goo.gle/3SxfE4d
document.timeline → https://goo.gle/3SwNF4u
Mais vídeos na série HTTP 203 → http://goo.gle/HTTP203
Inscreva-se no canal de desenvolvedores do Google Chrome → https://goo.gle/ChromeDevs
Além disso, se você gostou desse conteúdo, pode gostar do podcast HTTP203 → https://goo.gle/HTTP203Podcast