L'animation en couverture

L'animation sur la couverture donne vie au premier écran, en lui conférant un aspect distinctif et en faisant une première impression de la page.
LES TYPES D'ANIMATION :
Fondu enchaîné
L'élément apparaît par transparence
Fade in Up
Fondu à gauche
Fondu à droite
Zoom avant
L'élément apparaît par transparence à partir du bas
L'élément apparaît par transparence à partir de la droite
L'élément apparaît par transparence à partir de la gauche
L'élément apparaît progressivement en zoomant
L'élément apparaît par transparence depuis le haut
Fondu enchaîné vers le bas
EXEMPLES D'ANIMATION
Les animations de couverture les plus courantes sont l'en-tête, le sous-titre et les boutons
Une meilleure voie pour votre entreprise
Nous fournissons des technologies de pointe
pour les entreprises et les startups.
Sous-titre - Fade in Up
Durée - 1 sec
Délai - 0.1 sec
Heading - Fade in Up
Distance - 100px
Durée - 1 sec
Sous-titre - Fondu vers le haut
Durée - 1 sec
Distance - 30px
Délai - 0.1 sec
Heading - Fade in
Durée - 2 sec
Bouton 1 - Fade in Up
Durée - 1 sec
Distance - 30px
Délai - 0.7 sec
Bouton 2 - Fade in Up
Durée - 1 sec
Distance - 30px
Délai - 0.8 sec
Vous vous sentirez chez vous
Un coin café et nourriture dans le centre ville.
1423 Hamilton Ave, Cleveland
Notre menu
Nos contacts
Une nouvelle pizzeria dans la ville
1423 Hamilton Ave, Cleveland
Logo - Zoom in
Durée - 1 sec
Échelle - 90%
Heading - Fade in Up
Durée - 4 sec
Distance - 100px
Sous-titre - Fade in Up
Durée - 1 sec
Distance - 50px
Délai - 0.3 sec
Créez votre nouveau site web
Essayez l'animation sur la couverture pour créer quelque chose de très spécial
Démarrage
Sous-titre - Fade in Up
Durée - 0.9 sec
Distance - 100px
Délai - 0.2 sec
Heading - Fade in Up
Durée - 1.1 sec
Distance - 100px
Bouton - Zoom avant
Durée - 0,9
Échelle - 30 %
Délai - 1,1 sec
Je suis illustrateur numérique et motion designer. Consultez mon portfolio
Sous-titre - fondu à droite
Durée - 1,4 sec
Distance - 50px
Délai - 0,5 sec
Nom - Fondu enchaîné
Durée - 5 sec
NOUVEAU
Magasin de vêtements en ligne à New York
Boutique en ligne
Sous-titre - Fade in Up
Durée - 0,6 sec
Distance - 50px
Délai - 0,3 sec
Heading - Zoom in
Duration - 1 sec
Scale - 30px
Bouton 1 - Fade in Up
Durée - 1,2 sec
Distance - 50px
Délai - 0,4 sec
Céramiques faites à la main
SAMMO
Nous créons de la vaisselle artisanale avec amour
Heading - Fade in Down
Duration - 1.5 sec
Distance - 150px
Delay - 0.6 sec
Logo - Fondu enchaîné
Durée - 1,7 sec
Sous-titre - Fondu enchaîné
Durée - 1,4 sec
Délai - 1 sec
zone d'accueil
PARCOURIR LA TERRE ENSEMBLE
A propos du projet
Bouton - Fade in Up
Durée - 1sec
Distance - 30px
Délai - 0.6 sec
Logo - Fondu enchaîné
Durée - 1,5 sec
Heading - Fade in Up
Duration - 1.5 sec
Distance - 100px
Delay - 0.3 sec
Traditions de yoga, nouvelles méthodes
Prix
Adresse
A propos de nous
Suivre un cours
Contacts
Titre - Fondu à gauche
Durée - 1.3 sec
Distance - 150px
Bouton "Take a class" - Fade in
Durée - 1.7 sec
Délai - 1 sec
Bouton "Contacts" - Fondu enchaîné
Distance - 100px
Durée - 1,4 sec
Jamais
Prix
Adresse
A propos de nous
arrêter
l'amélioration
choses
EXPLOREZ LE CAS
"Never" - Fondu à droite
Durée - 1 sec
Distance - 100px
Délai - 0 sec
"Explore case" - Fade in
Durée - 1,6 sec
Délai - 0,6 sec
"Stop" - Fondu à droite
Durée - 1 sec
Distance - 100px
Délai - 0.2 sec
"Improving" - Fade in Right
Durée - 1 sec
Distance - 100 px
Délai - 0.2 sec
"Things" - Fade in Right
Durée - 1.6 sec
Distance - 100px
Délai - 0.4 sec
HEBERT
Biographie
Personnages
Chronologie
INTERVIEW
JULIEN
JULIEN - Fondu à gauche
Durée - 1 sec
Distance - 100px
Flèche vers le bas - Fondu vers le bas
Durée - 0,5 sec
Distance - 100px
Délai - 1,4 sec
HEBERT - Fondu à gauche
Durée - 1 sec
Distance - 100px
Délai - 0.1 sec
Interview - Fondu à gauche
Durée - 0,5 sec
Distance - 100px
Délai - 1 sec
Icônes de médias sociaux - Fondu vers le bas
Durée - 0,5 sec
Distance - 100px
Délai - 1,2 sec
Tous les entretiens - Fondu enchaîné vers le bas
Durée - 0,5 sec
Distance - 100px
Délai - 1,4 sec
Logo, éléments du menu, menu burger - Fondu à gauche
Durée - 1 sec
Distance - 100px
Délai - 1.7-1.9 sec
Tous les entretiens
TUTORIAL VIDÉO
Comment recréer cet effet d'animation dans l'éditeur Tilda