Animazione in copertina

L'animazione sulla copertina dà vita alla prima schermata, conferendole un aspetto distintivo e creando una prima impressione della pagina.
TIPI DI ANIMAZIONE:
Dissolvenza
L'elemento appare per trasparenza
Dissolvenza in alto
Dissolvenza a sinistra
Dissolvenza a destra
Ingrandimento
L'elemento appare in trasparenza dal basso
L'elemento appare in trasparenza da destra
L'elemento appare in trasparenza da sinistra
L'elemento appare gradualmente con lo zoom
L'elemento appare in trasparenza dall'alto
Dissolvenza in basso
ESEMPI DI ANIMAZIONE
Le animazioni di copertina più comuni sono l'intestazione, la sottointestazione e i pulsanti
Un percorso migliore per la vostra azienda
Forniamo tecnologie di nuova generazione
per aziende e startup.
Sottotitolo - Dissolvenza in alto
Durata - 1 sec
Ritardo - 0,1 sec
Intestazione - Dissolvenza in alto
Distanza - 100px
Durata - 1 sec
Sottotitolo - Dissolvenza in alto
Durata - 1 sec
Distanza - 30px
Ritardo - 0,1 sec
Intestazione - Dissolvenza in
Durata - 2 sec.
Pulsante 1 - Dissolvenza in alto
Durata - 1 sec
Distanza - 30px
Ritardo - 0,7 sec
Pulsante 2 - Dissolvenza in alto
Durata - 1 sec
Distanza - 30px
Ritardo - 0,8 sec
Vi sentirete a casa
Un angolo caffè e cibo nel centro della città.
1423 Hamilton Ave, Cleveland
Il nostro menu
I nostri contatti
Una nuova pizzeria in città
1423 Hamilton Ave, Cleveland
Logo - Ingrandimento
Durata - 1 sec
Scala - 90%
Intestazione - Dissolvenza verso l'alto
Durata - 4 sec
Distanza - 100px
Sottotitolo - Dissolvenza in alto
Durata - 1 sec
Distanza - 50px
Ritardo - 0,3 sec
Create il vostro nuovo sito web
Provate l'animazione sulla copertina per creare qualcosa di molto speciale
Inizio
Sottotitolo - Dissolvenza in alto
Durata - 0,9 sec
Distanza - 100px
Ritardo - 0,2 sec
Intestazione - Dissolvenza verso l'alto
Durata - 1,1 sec
Distanza - 100px
Pulsante - Zoom in
Durata - 0,9
Scala - 30%
Ritardo - 1,1 s
Sono un illustratore digitale e motion designer. Guarda il mio portfolio
Sottotitolo - Dissolvenza a destra
Durata - 1,4 sec
Distanza - 50px
Ritardo - 0,5 sec
Nome - Dissolvenza in
Durata - 5 sec.
NOUVEAU
Negozio di abbigliamento online di New York
Negozio online
Sottotitolo - Dissolvenza in alto
Durata - 0,6 sec
Distanza - 50px
Ritardo - 0,3 sec
Intestazione - Zoom in
Durata - 1 sec
Scala - 30px
Pulsante 1 - Dissolvenza in alto
Durata - 1,2 sec
Distanza - 50px
Ritardo - 0,4 sec
Ceramica fatta a mano
SAMMO
Creiamo stoviglie fatte a mano con amore
Intestazione - Dissolvenza in basso
Durata - 1,5 sec
Distanza - 150px
Ritardo - 0,6 sec
Logo - Dissolvenza in
Durata - 1,7 sec
Sottotitolo - Dissolvenza in
Durata - 1,4 sec
Ritardo - 1 sec
homearea
VIAGGIARE INSIEME SULLA TERRA
Il progetto
Pulsante - Dissolvenza in alto
Durata - 1 sec
Distanza - 30px
Ritardo - 0,6 sec
Logo - Dissolvenza in
Durata - 1,5 sec
Intestazione - Dissolvenza in alto
Durata - 1,5 sec
Distanza - 100px
Ritardo - 0,3 sec
Tradizioni yoga, nuovi metodi
Prezzi
Indirizzo
Chi siamo
Frequentare un corso
Contatti
Titolo - Dissolvenza a sinistra
Durata - 1,3 sec
Distanza - 150px
Pulsante "Prendi una lezione" - Dissolvenza in
Durata - 1,7 sec
Ritardo - 1 sec
Pulsante "Contatti" - Dissolvenza in
Distanza - 100px
Durata - 1,4 sec
Mai
Prezzi
Indirizzo
Chi siamo
fermarsi
migliorare
cose
ESPLORA IL CASO
"Mai" - Dissolvenza a destra
Durata - 1 sec
Distanza - 100px
Ritardo - 0 sec
"Explore case" - Dissolvenza in
Durata - 1,6 sec
Ritardo - 0,6 sec
"Stop" - Dissolvenza a destra
Durata - 1 sec
Distanza - 100px
Ritardo - 0,2 sec
"Migliorare" - Dissolvenza a destra
Durata - 1 sec
Distanza - 100 px
Ritardo - 0,2 sec
"Things" - Dissolvenza a destra
Durata - 1,6 sec
Distanza - 100px
Ritardo - 0,4 sec
HEBERT
Biografia
Personaggi
Linea temporale
INTERVISTA
GIULIO
JULIEN - Dissolvenza a sinistra
Durata - 1 sec
Distanza - 100px
Freccia giù - Dissolvenza in basso
Durata - 0,5 sec
Distanza - 100px
Ritardo - 1,4 sec
HEBERT - Dissolvenza a sinistra
Durata - 1 sec
Distanza - 100px
Ritardo - 0,1 sec
Intervista - Dissolvenza a sinistra
Durata - 0,5 sec
Distanza - 100px
Ritardo - 1 sec
Icone dei social media - Dissolvenza in basso
Durata - 0,5 sec
Distanza - 100px
Ritardo - 1,2 sec
Tutte le interviste - Dissolvenza in basso
Durata - 0,5 sec
Distanza - 100px
Ritardo - 1,4 sec
Logo, voci di menu, menu hamburger - Dissolvenza a sinistra
Durata - 1 sec
Distanza - 100px
Ritardo - 1,7-1,9 sec
Tutte le interviste
TUTORIALE VIDEO
Come ricreare questo effetto di animazione nell'editor Tilda