Анимация появления в обложке
Анимация в обложке оживит первый экран, придаст ему выразительность и создаст первое впечатление от страницы
КАКИЕ ВИДЫ АНИМАЦИИ БЫВАЮТ:
Fade in
Появление элемента из прозрачности
Fade in Up
Fade in Left
Fade in Right
Ampliar
Появление элемента через прозрачность снизу
Появление элемента через прозрачность справа
Появление элемента через прозрачность слева
Появление элемента через увеличение
Появление элемента через прозрачность сверху
Fade in Down
ПРИМЕРЫ АНИМАЦИИ
Чаще всего на обложках анимируют заголовок, подзаголовок и кнопки
Melhor maneira para seus negócios
Fornecemos novas tecnologias para empresas e startups
Legenda - Fade in
Duração - 1 seg.
Atraso - 0,1 seg.
Título - Fade in Up.
Distância -100 px,
Duração - 1 seg.
Legenda - Fade in Up
Duração - 1 seg.
Distância - 30 px
Atraso - 0,1 seg.
Título - Fade In
Duração - 2 segundos.
Botão 1 - Fade in Up
Duração - 1 seg.
Distância - 30 px
Atraso - 0,7 seg.
Botão 2 - Fade in Up
Duração - 1 seg.
Distância - 30 px
Atraso - 0,8 seg.
Sinta-se em casa
Um canto de café e comida no centro da cidade.
Wineer 12A str., Minereed
Nosso cardápio
Nossos contatos
Uma nova pizzaria na cidade
Wineer str., 12A, Minereed
Logotipo - Zoom In
Duração - 1 seg.
Escala - 90%
Título - Fade in Up
Duração - 4 seg.
Distância - 100 px
Legenda - Fade in Up
Duração - 1 seg.
Distância - 50 px
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
Título - Fade in Up.
Duração - 1,1 seg.
Distância - 100 px
Botão - Ampliar.
Duração - 0,9
Escala - 30%
Atraso - 1,1 seg.
Sou ilustrador e animador digital. Confira meu portfólio
Legenda - Fade in Right
Duração - 1,4 seg.
Distância - 50 px
Atraso - 0,5 seg.
Nome - Fade in
Duração - 5 segundos.
NOVIDADES
Uma loja on-line de roupas de Nova York
Loja
Legenda - Fade in Up
Duração - 0,6 seg.
Distância - 50 px
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 - 50 px
Atraso - 0,4 seg.
Cerâmica artesanal
SAMMO
Criamos produtos artesanais com amor
Título - Fade in Down.
Duração - 1,5 seg.
Distância - 150 px
Atraso - 0,6 seg.
Logotipo - Fade in.
Duração - 1,7 seg.
Legenda - Fade in.
Duração - 1,4 seg.
Delay - 1 seg.
área de origem
VIAJAR JUNTOS NA TERRA
Sobre o projeto
Botão - Fade in Up
Duração - 1sec.
Distância - 30 px
Atraso - 0,6 ec.
Logotipo - Fade In
Duração - 1.5
Título - Fade in up.
Duração - 1,5
Distância - 100 px
Atraso - 0,3
Tradições do Yoga, novos métodos
Preços
Endereço
Sobre nós
Fazer aulas
Contatos
Título - Fade in Left
Duração - 1,3 seg.
Distância - 150 px
Take class - Fade in
Duração - 1,7 seg.
Atraso - 1 seg.
Botão de contatos - Fade in
Distância - 100 px
Duração - 1,4 seg.
Nunca
Preços
Endereço
Sobre nós
parar
melhorando
coisas
VER CASO
"Never" - Fade in Right
Duração - 1 seg.
Distância - 100 px
Atraso - 0 seg.
"View case" - Fade in
Duração - 1,6 seg.
Atraso - 0,6 seg.
"Stop" - Fade in Right
Duração - 1 seg.
Distância - 100 px
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 - 100 px
Atraso - 0,4 seg.
HEBERT
Biografia
Personas
Linha do tempo
ENTREVISTA
JULIEN
1. JULIEN - Fade in Left
Duração - 1 seg.
Distância - 100 px
5. Seta para baixo - Fade in down
Duração - 0,5 seg.
Distância - 100 px
Atraso - 1,4 seg.
2. HEBERT - Fade in Left
Duração - 1 seg.
Distância - 100 px
Atraso - 0,1 seg.
3. "Interview"- Fade in Left
Duração - 0,5 seg.
Distância - 100 px
Atraso - 1 seg.
4. Redes sociais - Fade in Down
Duração - 0,5 seg.
Distância - 100 px
Atraso - 1,2 seg.
6. "All interviews" - Fade in Down
Duração - 0,5 seg.
Distância - 100 px
Atraso - 1,4 seg.
7. Logotipo, menu, hambúrguer - Fade in Left
Duração - 1 seg.
Distância - 100 px
Delay 1.7-1,9sec.
Todas as entrevistas
ВИДЕО УРОК
Как повторить анимацию в редакторе Тильды