Montra cinematográfica com scroll
Uma secção reutilizável que transforma qualquer demo num pequeno filme: o vídeo abre de uma janela para ecrã inteiro ao fazer scroll, seguido de uma galeria de fotos.
Objetivo técnico
Dar a cada demo o ar de um site feito por uma agência — vídeo real, tipografia confiante e movimento — mantendo-o num único script sem dependências que funciona no telemóvel.
Restrições
- Sem bibliotecas de animação: um pequeno script por secção.
- Apenas um vídeo a descodificar de cada vez, para proteger a bateria e os dados.
- Tem de respeitar as preferências de movimento reduzido e passar a um layout estático.
Arquitetura
- 01
Carrossel fixado
Uma secção alta com um palco fixo; o progresso do scroll controla o clip-path, a escala e o capítulo.
- 02
Capítulos
Até três clips em transição com legendas; só o clip ativo reproduz.
- 03
Galeria fixada
Uma faixa horizontal deslocada pelo scroll, com paralaxe por cartão.
- 04
Fotos próprias primeiro
Quando se conhecem as fotos do próprio negócio, são elas que abrem a galeria.
O fluxo vai da esquerda para a direita, de cima para baixo.
Decisões principais
Vídeo em vez de 3D procedural
A anterior sala 3D procedural parecia sintética. O vídeo licenciado tornou a mesma secção real de imediato.
Estilos com espaço de nomes
A secção é injetada em muitos modelos diferentes, por isso cada classe tem prefixo para evitar colisões com o CSS do modelo — uma lição aprendida com um bug de layout real.
Pré-carregar só o clip seguinte
O primeiro clip carrega de imediato; cada clip seguinte passa de preload='none' a pré-carregamento mesmo antes de ser preciso.
Capturas
Desafios
Colisões de CSS
Um nome de classe genérico na galeria colidiu com a regra de grelha de um modelo e encolheu a faixa. Pôr prefixo em todos os seletores resolveu-o de vez.
Sobreposição no telemóvel
O apelo à ação final sobrepunha-se à barra de ações fixa no telemóvel; em ecrãs pequenos fica agora escondido em favor da barra.
Lições aprendidas
- O movimento ligado ao scroll deve depender de um único valor de progresso; tudo o resto deriva dele.
- Os componentes injetados têm de defender os próprios estilos.
- Vídeo real com contenção vence gráficos gerados elaborados.