Animação na capa

A animação na capa dá vida à primeira tela, dando a ela uma aparência distinta e causando uma primeira impressão da página
TIPOS DE ANIMAÇÃO:
Fade in
O elemento aparece por transparência
Fade in Up
Fade in Left
Fade in Right
Ampliar
O elemento aparece por transparência a partir da parte inferior
O elemento aparece por transparência a partir da direita
O elemento aparece por transparência a partir da esquerda
O elemento aparece gradualmente ao aumentar o zoom
O elemento aparece por meio de transparência a partir de cima
Fade in Down
EXEMPLOS DE ANIMAÇÃO
As animações de capa mais comuns são o título, o subtítulo e os botões
Um caminho melhor para sua empresa
Fornecemos tecnologias de última geração
para empresas e startups
Subtítulo - Fade in Up
Duração - 1 seg
Atraso - 0,1 seg
Título - Fade in Up
Distância - 100px
Duração - 1 seg
Subtítulo - Fade in Up
Duração - 1 seg
Distância - 30px
Atraso - 0,1 seg
Título - Fade in
Duração - 2 segundos
Botão 1 - Fade in Up
Duração - 1 seg
Distância - 30px
Atraso - 0,7 seg
Botão 2 - Fade in Up
Duração - 1 seg
Distância - 30px
Atraso - 0,8 seg
Você se sentirá em casa
Uma área de café e alimentação no centro da cidade.
1423 Hamilton Ave, Cleveland
Nosso cardápio
Nossos contatos
Uma nova pizzaria na cidade
1423 Hamilton Ave, Cleveland
Logotipo - Zoom in
Duração - 1 seg
Escala - 90%
Título - Fade in Up
Duração - 4 seg
Distância - 100px
Subtítulo - Fade in Up
Duração - 1 seg
Distância - 50px
Atraso - 0,3 seg
Crie seu novo site
Experimente a animação na capa para criar algo muito especial
Início
Subtítulo - Fade in Up
Duração - 0,9 seg
Distância - 100px
Atraso - 0,2 seg
Título - Fade in Up
Duração - 1,1 seg
Distância - 100px
Botão - Zoom in
Duração - 0,9
Escala - 30%
Atraso - 1,1 seg
Sou ilustrador digital e motion designer. Confira meu portfólio
Subtítulo - Fade in Right
Duração - 1,4 seg
Distância - 50px
Atraso - 0,5 seg
Nome - Fade in
Duração - 5 segundos
NOVIDADES
Loja de roupas on-line de Nova York
Loja virtual
Subtítulo - Fade in Up
Duração - 0,6 seg
Distância - 50px
Atraso - 0,3 seg
Título - Zoom in
Duração - 1 seg
Escala - 30px
Botão 1 - Fade in Up
Duração - 1,2 seg
Distância - 50px
Atraso - 0,4 seg
Cerâmica artesanal
SAMMO
Criamos utensílios de mesa feitos à mão com amor
Título - Fade in Down
Duração - 1,5 seg
Distância - 150px
Atraso - 0,6 seg
Logotipo - Fade in
Duração - 1,7 s
Subtítulo - Fade in
Duração - 1,4 s
Atraso - 1 s
área de origem
VIAJAR JUNTOS PELA TERRA
Sobre o projeto
Botão - Fade in Up
Duração - 1sec
Distância - 30px
Atraso - 0,6 seg
Logotipo - Fade in
Duração - 1,5 s
Título - Fade in Up
Duração - 1,5 seg
Distância - 100px
Atraso - 0,3 seg
Tradições do Yoga, novos métodos
Preços
Endereço
Sobre nós
Faça um curso
Contatos
Título - Fade in Left
Duração - 1,3 seg
Distância - 150px
Botão "Take a class" (Assistir a uma aula) - Fade in
Duração - 1,7 s
Atraso - 1 s
Botão "Contatos" - Fade in
Distância - 100px
Duração - 1,4 seg
Nunca
Preços
Endereço
Sobre nós
parar
melhorando
coisas
EXPLORE CASE
"Never" - Fade in Right
Duração - 1 seg
Distância - 100px
Atraso - 0 seg
"Explore case" - Fade in
Duração - 1,6 s
Atraso - 0,6 s
"Stop" - Fade in Right
Duração - 1 seg
Distância - 100px
Atraso - 0,2 seg
"Improving" - Fade in Right
Duração - 1 seg
Distância - 100 px
Atraso - 0,2 seg
"Things" - Fade in Right
Duração - 1,6 seg
Distância - 100px
Atraso - 0,4 seg
HEBERT
Biografia
Personas
Linha do tempo
ENTREVISTA
JULIEN
JULIEN - Fade in Left
Duração - 1 seg
Distância - 100px
Seta para baixo - Fade in Down
Duração - 0,5 seg
Distância - 100px
Atraso - 1,4 seg
HEBERT - Fade in Left
Duração - 1 seg
Distância - 100px
Atraso - 0,1 seg
Interview- Fade in Left
Duração - 0,5 seg
Distância - 100px
Atraso - 1 seg
Ícones de mídia social - Fade in Down
Duração - 0,5 seg
Distância - 100px
Atraso - 1,2 seg
Todas as entrevistas - Fade in Down
Duração - 0,5 seg
Distância - 100px
Atraso - 1,4 seg
Logotipo, itens de menu, menu de hambúrguer - Fade in Left
Duração - 1 seg
Distância - 100px
Atraso - 1,7-1,9 seg
Todas as entrevistas
VÍDEO TUTORIAL
Como recriar esse efeito de animação no editor Tilda