Skip to content

henriquelauar/formulario-animado

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Formulário animado com JS puro e CSS Animation (Rocketseat)

Desafios

  • Fazer o formulário aparecer, suavemente, quando a página abrir
  • Fazer os campos aparecem da esquerda pra direita, suavizando a entrada e fazendo-os entrar em momentos distintos
  • Quando clicar em Login, fazer o formulário sair da tela, indo para baixo
  • Remover formulário do html e não mostrar rolagem enquanto o formulário está saindo da tela
  • Adicionar um efeito diferente de timing para a saída do formulário
  • Fazer o formulário dizer não-não (vibrar) caso haja campos vazios.
  • Criar alguns quadrados animados (que fiquem girando) e que saem de baixo da tela (fora do campo de visão) e vão para cima da tela (que saia do campo de visão também). Detalhes: Deve ter tamanhos diferentes, sairem em momentos diferentes, terem timing diferente, animação contínua.

References

https://www.youtube.com/watch?v=GykTLqODQuU&t=58s

CSS Animation Docs

Animation Timing Docs

Site para criar animações

Site para criar cubic Bézier timming

About

Formulário animado usando HTML, CSS e JavaScript

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published