aulify · Mini-Projecto
UC UC02650 · T. Multimédia
Versão · Aluno
Mini-Projecto · Landing page interactiva
CSS + GSAP — scroll animations, microinterações, responsiva e acessível
Contexto
Cada aluno (ou par) constrói uma landing page interactiva com animações em CSS + GSAP: animações ao carregar, por scroll e microinterações em hover, responsiva e acessível. O foco é a interactividade e animação, sobre uma estrutura simples mas bem feita.
Tema
Escolher um produto/serviço fictício para promover (app, evento, produto físico, portfólio, curso). A página deve ter várias secções que justifiquem animação.
Requisitos
Funcionais
- Estrutura com pelo menos 5 secções (hero, funcionalidades, números/estatística, testemunhos/galeria, CTA + footer).
- Animação de entrada do hero (timeline GSAP ou CSS sequenciado).
- Scroll animations: elementos que aparecem ao entrar no viewport (Intersection Observer ou ScrollTrigger), com pelo menos um efeito em cascata (stagger) e/ou um contador animado.
- Microinterações: hover em botões, cards e links.
- Pelo menos um efeito avançado: parallax, pin/scrub, line drawing de SVG, ou Lottie.
Não-funcionais
- Responsiva (mobile, tablet, desktop).
- Performante (animar transform/opacity, alvo 60 fps).
- Acessível: respeitar
prefers-reduced-motion; funcionar sem animação.
Fases
| Fase | Tempo | Entregável |
|---|---|---|
| 1. Estrutura HTML + CSS base | 2h | Página estática com 5 secções |
| 2. Responsividade | 1.5h | Layout adaptado a 3 tamanhos |
| 3. Animação do hero | 1.5h | Entrada animada (timeline) |
| 4. Scroll animations | 2h | Reveal + stagger + contador |
| 5. Microinterações + efeito avançado | 2h | Hover + parallax/SVG/Lottie |
| 6. Performance + acessibilidade + demo | 1h | reduced-motion, 60 fps, demo |
Critérios
| Item | Peso |
|---|---|
| Estrutura e qualidade base | 10% |
| Responsividade | 15% |
| Animação do hero | 15% |
| Scroll animations | 20% |
| Microinterações | 15% |
| Efeito avançado | 10% |
| Performance e acessibilidade | 15% |
Reflexão
Em meia página: que animação deu mais trabalho a tornar fluida? Como garantiste 60 fps? O que muda na página quando o prefers-reduced-motion está activo?