Анимация появления в обложке
Анимация в обложке оживит первый экран, придаст ему выразительность и создаст первое впечатление от страницы
КАКИЕ ВИДЫ АНИМАЦИИ БЫВАЮТ:
Fundido de entrada
Появление элемента из прозрачности
Fundido hacia arriba
Fundido a la izquierda
Fundido a la derecha
Ampliar
Появление элемента через прозрачность снизу
Появление элемента через прозрачность справа
Появление элемента через прозрачность слева
Появление элемента через увеличение
Появление элемента через прозрачность сверху
Fundido hacia abajo
ПРИМЕРЫ АНИМАЦИИ
Чаще всего на обложках анимируют заголовок, подзаголовок и кнопки
Mejor para su empresa
Proporcionamos nuevas tecnologías a empresas y startups
Subtítulo - Fundido de entrada
Duración - 1 seg.
Retardo - 0,1 seg.
Título - Fundido hacia arriba.
Distancia -100 px,
Duración - 1 seg.
Subtítulo - Fundido de entrada Arriba
Duración - 1 seg.
Distancia - 30 px
Retardo - 0,1 seg.
Título - Fade In
Duración - 2 seg.
Botón 1 - Fundido de entrada Arriba
Duración - 1 seg.
Distancia - 30 px
Retardo - 0,7 seg.
Botón 2 - Fundido de entrada Arriba
Duración - 1 seg.
Distancia - 30 px
Retardo - 0,8 seg.
Siéntase como en casa
Un rincón de café y comida en el centro de la ciudad.
Wineer 12A str., Minereed
Nuestro menú
Nuestros contactos
Una nueva pizzería en la ciudad
Calle Wineer, 12A, Minereed
Logotipo - Acercar
Duración - 1 seg.
Escala - 90%
Título - Fundido de entrada Arriba
Duración - 4 seg.
Distancia - 100 px
Subtítulo - Fundido de entrada Arriba
Duración - 1 seg.
Distancia - 50 px
Retardo - 0,3 seg.
Cree su nuevo sitio
Prueba la animación en la portada para crear algo muy especial
Inicio
Subtítulo - Fundido ascendente.
Duración - 0,9 seg.
Distancia - 100px
Retardo - 0.2
Título - Fundido hacia arriba.
Duración - 1,1 seg.
Distancia - 100 px
Botón - Acercar.
Duración - 0,9
Escala - 30%
Retardo - 1,1 seg.
Soy ilustrador y animador digital. Echa un vistazo a mi portafolio
Subtítulo - Fundido a la derecha
Duración - 1,4 seg.
Distancia - 50 px
Retardo - 0,5 seg.
Nombre - Fade in
Duración - 5 seg.
NOUVEAU
Una tienda online de ropa de Nueva York
Tienda
Subtítulo - Fundido de entrada Arriba
Duración - 0,6 seg.
Distancia - 50 px
Retardo - 0,3 seg.
Título - Acercar
Duración - 1 seg.
Escala - 30px
Botón 1 - Fundido de entrada Arriba
Duración - 1,2 seg.
Distancia - 50 px
Retardo - 0,4 seg.
Cerámica artesanal
SAMMO
Creamos productos hechos a mano con amor
Título - Fundido hacia abajo.
Duración - 1,5 seg.
Distancia - 150 px
Retardo - 0,6 seg.
Logotipo - Fundido de entrada.
Duración - 1.7 sec.
Subtítulo - Fundido de entrada.
Duración - 1,4 seg.
Retardo - 1 seg.
homeearea
VIAJAR JUNTOS POR LA TIERRA
Sobre el proyecto
Botón - Fade in Up
Duración - 1sec.
Distancia - 30 px
Retardo - 0,6 ec.
Logotipo - Fundido de entrada
Duración - 1.5
Título - Fundido hacia arriba.
Duración - 1.5
Distancia - 100 px
Retardo - 0.3
Tradiciones de yoga, nuevos métodos
Precios
Dirección
Quiénes somos
Toma clases
Contactos
Título - Fundido a la izquierda
Duración - 1,3 seg.
Distancia - 150 px
Toma de clase - Fundido de entrada
Duración - 1,7 seg.
Retardo - 1 seg.
Botón Contactos - Fundido de entrada
Distancia - 100 px
Duración - 1,4 seg.
Nunca
Precios
Dirección
Quiénes somos
stop
mejorar
cosas
VER CASO
"Nunca" - Fundido a la derecha
Duración - 1 seg.
Distancia - 100 px
Retardo - 0 seg.
"Ver caso" - Fundido de entrada
Duración - 1,6 seg.
Retardo - 0,6 seg.
"Stop" - Fundido a la derecha
Duración - 1 seg.
Distancia - 100 px
Retardo - 0,2 seg.
"Mejorando" - Fundido a la derecha
Duración - 1 seg.
Distancia - 100 px
Retardo - 0,2 seg.
"Cosas" - Fundido a la derecha
Duración - 1,6 seg.
Distancia - 100 px
Retardo - 0,4 seg.
HEBERT
Biografía
Personas
Cronología
ENTREVISTA
JULIÁN
1. JULIEN - Fundido a la izquierda
Duración - 1 seg.
Distancia - 100 px
5. Flecha abajo - Fundido hacia abajo
Duración - 0,5 seg.
Distancia - 100 px
Retardo - 1,4 seg.
2. HEBERT - Fundido a la izquierda
Duración - 1 seg.
Distancia - 100 px
Retardo - 0,1 seg.
3. "Entrevista" - Fundido a la izquierda
Duración - 0,5 seg.
Distancia - 100 px
Retardo - 1 seg.
4. Redes sociales - Fade in Down
Duración - 0,5 seg.
Distancia - 100 px
Retardo - 1,2 seg.
6. "Todas las entrevistas" - Fundido hacia abajo
Duración - 0,5 seg.
Distancia - 100 px
Retardo - 1,4 seg.
7. Logo, menú, hamburguesa - Fundido a la izquierda
Duración - 1 seg.
Distancia - 100 px
Retardo 1,7-1,9seg.
Todas las entrevistas
ВИДЕО УРОК
Как повторить анимацию в редакторе Тильдые