Animación en portada

La animación en la portada da vida a la primera pantalla, le confiere un aspecto distintivo y causa una primera impresión de la página
TIPOS DE ANIMACIÓN:
Fundido de entrada
El elemento aparece por transparencia
Fundido hacia arriba
Fundido a la izquierda
Fundido a la derecha
Ampliar
El elemento aparece por transparencia desde abajo
El elemento aparece por transparencia desde la derecha
El elemento aparece por transparencia desde la izquierda
Elemento que aparece gradualmente al acercar el zoom
El elemento aparece por transparencia desde arriba
Fundido hacia abajo
EJEMPLOS DE ANIMACIÓN
Las animaciones de portada más habituales son el encabezamiento, el subencabezamiento y los botones
Un camino mejor para su empresa
Ofrecemos tecnologías de última generación
para empresas y startups
Subtítulo - Fundido de entrada Arriba
Duración - 1 seg
Retardo - 0.1 seg
Encabezado - Fundido hacia arriba
Distancia - 100px
Duración - 1 seg.
Subheading- Fade in Up
Duration - 1 sec
Distance - 30px
Delay - 0.1 sec
Encabezado - Fundido en
Duración - 2 seg.
Botón 1 - Fundido hacia arriba
Duración - 1 seg
Distancia - 30px
Retardo - 0.7 seg
Botón 2 - Fundido hacia arriba
Duración - 1 seg
Distancia - 30px
Retraso - 0.8 seg
Se sentirá como en casa
Un rincón de café y comida en el centro de la ciudad.
1423 Hamilton Ave, Cleveland
Nuestro menú
Nuestros contactos
Una nueva pizzería en la ciudad
1423 Hamilton Ave, Cleveland
Logotipo - Acercar
Duración - 1 seg
Escala - 90%
Encabezado - Fundido hacia arriba
Duración - 4 seg
Distancia - 100px
Subtítulo - Fundido hacia arriba
Duración - 1 seg
Distancia - 50px
Retraso - 0.3 seg
Cree su nuevo sitio web
Prueba la animación en la portada para crear algo muy especial
Inicio
Subtítulo - Fundido hacia arriba
Duración - 0.9 seg
Distancia - 100px
Retraso - 0.2 seg
Encabezado - Fundido hacia arriba
Duración - 1.1 seg
Distancia - 100px
Botón - Acercar
Duración - 0.9
Escala - 30%
Retraso - 1.1 seg
Soy ilustrador digital y motion designer. Echa un vistazo a mi portafolio
Subtítulo - Fundido a la derecha
Duración - 1,4 seg
Distancia - 50px
Retraso - 0,5 seg
Nombre - Fade in
Duración - 5 seg.
NOUVEAU
Tienda de ropa online en Nueva York
Tienda en línea
Subtítulo - Fundido hacia arriba
Duración - 0.6 seg
Distancia - 50px
Retraso - 0.3 seg
Encabezado - Acercar
Duración - 1 seg
Escala - 30px
Botón 1 - Fundido hacia arriba
Duración - 1,2 seg
Distancia - 50px
Retardo - 0,4 seg
Cerámica artesanal
SAMMO
Creamos vajillas artesanales con amor
Encabezado - Fundido hacia abajo
Duración - 1,5 seg
Distancia - 150px
Retraso - 0,6 seg
Logotipo - Fundido en
Duración - 1.7 sec
Subtítulo - Fundido de entrada
Duración - 1,4 seg
Retardo - 1 seg
homeearea
RECORREMOS JUNTOS LA TIERRA
Sobre el proyecto
Botón - Fundido hacia arriba
Duración - 1seg
Distancia - 30px
Retardo - 0.6 seg
Logotipo - Fundido de entrada
Duración - 1,5 segundos
Encabezado - Fundido hacia arriba
Duración - 1,5 seg
Distancia - 100px
Retraso - 0,3 seg
Tradiciones de yoga, nuevos métodos
Precios
Dirección
Quiénes somos
Toma una clase
Contactos
Título - Fundido a la izquierda
Duración - 1.3 seg
Distancia - 150px
Botón "Toma una clase" - Fundido de entrada
Duración - 1,7 seg
Retraso - 1 seg
Botón "Contactos" - Fundido de entrada
Distancia - 100px
Duración - 1.4 sec
Nunca
Precios
Dirección
Quiénes somos
stop
mejorar
cosas
EXPLORAR CASO
"Nunca" - Fundido a la derecha
Duración - 1 seg
Distancia - 100px
Retraso - 0 seg
"Explore case" - Fundido de entrada
Duración - 1,6 seg
Retardo - 0,6 seg
"Stop" - Fundido a la derecha
Duración - 1 seg
Distancia - 100px
Retraso - 0.2 seg
"Mejorando" - Fundido a la derecha
Duración - 1 seg
Distancia - 100 px
Retraso - 0.2 seg
"Things" - Fundido a la derecha
Duración - 1.6 seg
Distancia - 100px
Retraso - 0.4 seg
HEBERT
Biografía
Personas
Cronología
ENTREVISTA
JULIÁN
JULIEN - Fundido de entrada Izquierda
Duración - 1 seg
Distancia - 100px
Flecha Abajo - Fundido en Abajo
Duración - 0.5 seg
Distancia - 100px
Retraso - 1.4 seg
HEBERT - Fundido a la izquierda
Duración - 1 seg
Distancia - 100px
Retraso - 0.1 seg
Entrevista- Fundido a la izquierda
Duración - 0.5 seg
Distancia - 100px
Retraso - 1 seg
Iconos de redes sociales - Fade in Down
Duración - 0.5 seg
Distancia - 100px
Retraso - 1.2 sec
Todas las entrevistas - Fundido hacia abajo
Duración - 0,5 seg
Distancia - 100px
Retraso - 1,4 seg
Logotipo, elementos de menú, menú de hamburguesa - Fundido a la izquierda
Duración - 1 seg
Distancia - 100px
Retraso - 1.7-1.9 seg
Todas las entrevistas
VIDEO TUTORIAL
Cómo recrear este efecto de animación en el editor Tilda