aulify
UC UC02650 · T. Multimédia
Ficha 02 · Planear as animações de uma landing page
Scroll, hover e transições com pseudo-código
Versão · Aluno
Tempo · 90 minutos
Cotação · 100 pontos
Aluno(a)
Turma
Nº
Data
Objectivos da ficha
- Planeamento de animações
- Pseudo-código
- Acessibilidade
Parte I · Verdadeiro ou Falso (20 pts)
Indica V ou F e justifica.
- O ScrollTrigger (GSAP) permite ligar o progresso de uma animação ao scroll (scrub). (5 pts)
- As timelines do GSAP servem para sequenciar e sincronizar várias animações. (5 pts)
- O efeito de parallax cria sensação de profundidade movendo camadas à mesma velocidade. (5 pts)
- Uma landing page deve funcionar mesmo que as animações estejam desativadas. (5 pts)
Parte II · Planear as animações (40 pts)
Recebes a estrutura de uma landing page de uma app:
[Header fixo: logo + menu + botão "Descarregar"]
[Hero: título + subtítulo + botão + mockup do telemóvel]
[Funcionalidades: 3 cards]
[Números: 3 estatísticas (ex: 10k utilizadores)]
[Testemunhos: carrossel]
[CTA final + footer]
Planeia as animações interactivas da página, organizadas por tipo: ao carregar (hero), por scroll e por hover. Para cada animação, indica o elemento, o gatilho e o efeito. (40 pts)
Parte III · Pseudo-código de uma animação por scroll (40 pts)
Escolhe a animação dos 3 cards de funcionalidades (fade-up em cascata quando entram no viewport) e escreve o pseudo-código (ou código real) que a implementa, garantindo: (a) só animam quando entram; (b) animam em cascata (stagger); (c) respeitam prefers-reduced-motion. (40 pts)