Comment créer une animation d’avion pour apporter une touche distinctive à votre site Web

Démo d’animation d’avion

Dans le monde de la conception Web, les animations CSS donnent aux sites Web un aspect cool et interactif. Les animations CSS rendent les pages Web ennuyeuses plus attrayantes en ajoutant de petits mouvements et des effets fascinants. L’un de ces effets est l’animation d’un avion. Désormais, la plupart des gens connaissent les propriétés CSS Animation et peuvent les appliquer aux animations de base de sites Web. Mais je veux prendre un exemple d’animation d’avion qui montre comment nous pouvons facilement implémenter des animations complexes. Voyons comment se forme cet effet, ses implémentations et ses applications.

Pour commencer, il faut visualiser le produit final : de nombreux avions survolant le fond d’une carte du monde, créant l’illusion d’un vol qui décolle, traverse plusieurs pays et atterrit dans un autre.

Construire l’avion

Commencez par créer une forme d’avion de base à l’aide de graphiques vectoriels évolutifs (SVG). SVG est un format de fichier vectoriel, ce qui signifie que vous pouvez facilement redimensionner l’image et qu’elle sera toujours fluide et nette. SVG peut être créé à l’aide d’Adobe Illustrator, Figma, etc. Nous pouvons créer différentes parties de l’avion comme le corps, les ailes et la queue par des chemins SVG. Nous pouvons également utiliser diverses propriétés CSS telles que border-radius, transform et box-shadow pour un aspect 3D. Ou les images SVG peuvent être téléchargées depuis SVG gratuit des sites.

Code SVG de l’avion

Mettre en pratique les animations d’avion

Les images clés en CSS peuvent être utilisées pour spécifier une séquence d’animation. Tout d’abord, divisez l’animation en plusieurs segments comme : Décollage, Vol à travers le ciel et l’atterrissage. Maintenant, nous voulons diviser le temps : premiers 30% pour décollage, prochain 30 % à 70 % pour voler, et derniers 30 % pour atterrissage. Ces horaires peuvent varier selon vos besoins.

1. Animer l’avion pour simuler le décollage

Commencez par positionner l’avion au point 1. Vous pouvez y parvenir en utilisant les propriétés CSS fondamentales telles que position, top et left. On peut simuler le décollage en modifiant progressivement l’échelle de l’avion de 0 à 1 entre 0% et 30% du temps de vol. Cela donnera l’impression que l’avion grossit.

Décoller

.aeroplane {
  position: relative;
  width: 45px;
  height: 45px;
  margin-bottom: 20px;
  top: 250px;
  left: 200px;
 }
 
 .aeroplane .aeroplane-icon {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: rotate(225deg);
  -webkit-animation: move-aeroplane 10s infinite;
  animation: move-aeroplane 10s infinite;
 }
 
 @keyframes move-aeroplane {
  0% {
    bottom: 10px;
    right: 10px;
    opacity: 0;
    transform: rotate(225deg) scale(0);
  }
 
  30% {
    bottom: 10px;
    right: 10px;
    opacity: 1;
    transform: rotate(225deg) scale(1);
  }
  ...
 }

2. Envoler le ciel

Nous pouvons ajouter plus d’effets d’animation à notre avion une fois qu’il est en vol pour reproduire le vol. Cela pourrait inclure la création d’une traînée de condensation pour imiter le mouvement du vol dans les airs. Pour simuler le mouvement, nous voulons que l’avion se trouve au point 1 et que nous nous déplacions lentement vers le point 2. Vous pouvez y parvenir en ajustant les propriétés CSS en bas et à droite.

@keyframes move-aeroplane {
  ...
  70% {
    bottom: 200px;
    right: 200px;
    opacity: 1;
    transform: rotate(225deg) scale(1);
  }
  ...
 }
 

Maintenant, pour la traînée de condensation, en définissant des images clés pour la trajectoire de vol et en les appliquant à l’élément avion, vous pouvez créer une animation transparente qui simule le vol.

Pour y parvenir, nous avons créé une ligne avec CSS et ajouté un fond dégradé afin qu’il soit plus sombre vers l’avion et s’estompe dans l’autre sens. De plus, comme nous simulons le décollage et l’atterrissage pendant les premier et dernier 30 % du temps, nous ne voulons pas de cette traînée pendant cette période. Son opacité est donc nulle à cet endroit.

Pendant que l’avion vole, nous souhaitons ajouter une traînée de condensation, la conserver pendant un moment, puis la faire disparaître. Les horaires sont donc répartis en conséquence. Après les 30 % que nous avons réservés pour le décollage, ajoutez de la traînée pendant 15 % du temps, maintenez-la pendant les 10 % suivants, puis éteignez-la pendant encore 15 % du temps, avant de commencer l’atterrissage. Nous modifions l’opacité et la largeur en conséquence pour donner l’impression qu’un avion a laissé une traînée de condensation.

.aeroplane .aeroplane-icon:after {
  position: absolute;
  right: 0;
  top: 15px;
  content: '';
  height: 1px;
  width: 0px;
  background: #ffffff;
  background: -moz-linear-gradient(left, rgba(0,0,0,0.09) 0%, #ffffff 100%);
  background: -webkit-linear-gradient(left, rgba(0,0,0,0.09) 0%,#ffffff 100%);
  background: linear-gradient(to right, rgba(0,0,0,0.09) 0%,#ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#000000", endColorstr="#ffffff",GradientType=1 );
  -webkit-animation: line 10s infinite;
  animation: line 10s infinite;
  animation-fill-mode: forwards;
 }
 
 
 @keyframes line {
  0% {
    width: 0;
    opacity: 0;
  }
 
 
  30% {
    width: 0;
    opacity: 0;
  }
 
 
  45% {
    width: 100px;
    opacity: 1;
  }
 
 
  55% {
    width: 100px;
    opacity: 1;
  }
 
 
  70% {
    width: 0;
    opacity: 0;
  }
 
 
  100% {
    width: 0;
    opacity: 0;
  }
 } 

3. Animer l’avion pour simuler l’atterrissage

Enfin, nous animerons la descente et l’atterrissage de l’avion. Nous pouvons imiter l’atterrissage en inversant la séquence d’animation du décollage. En changeant progressivement l’échelle de l’avion de 1 à 0 de 70 % à 100 %, nous pouvons simuler la taille de l’avion qui rétrécit et effectue un atterrissage.

Atterrissage

 @keyframes move-aeroplane {
  ...
  100% {
    bottom: 200px;
    right: 200px;
    opacity: 0;
    transform: rotate(225deg) scale(0);
  }
 } 

Applications dans la conception Web

Les animations d’avion ne sont pas seulement visuellement attrayantes, elles améliorent également l’expérience utilisateur globale. Ces animations engagent les utilisateurs et laissent une impression. Voici quelques scénarios dans lesquels cela pourrait être utile.

• Sites Web de voyage : utilisez des animations d’avion pour présenter les itinéraires de vol et leurs destinations, les forfaits de voyage comme les itinéraires à escales multiples et les visiteurs intéressants pour commencer leur prochaine aventure.
• Plateformes éducatives : intégrez des simulations animées de la mécanique des avions ou des vols historiques pour améliorer les expériences d’apprentissage et rendre les concepts complexes plus accessibles.
• Portails de divertissement : créez des jeux interactifs ou des expériences de narration dans lesquels les utilisateurs pilotent des avions virtuels dans des environnements immersifs, ajoutant un élément de gamification et d’excitation.
• Ajoutez-le pour afficher vos empreintes mondiales.
• Ou simplement ajouter un effet accrocheur à une page de destination.

Conclusion

Avec un peu de créativité et d’expérimentation, nous pouvons donner l’impression que des avions volent sur nos sites Web. Ces animations rendent les sites Web plus attrayants et intéressants. Les expériences utilisateur peuvent être grandement améliorées par les concepteurs. La prochaine fois que vous rencontrerez une animation de site Web intéressante, réfléchissez à la manière dont elle pourrait être incorporée en la disséquant en plusieurs composants plus petits. De plus, les utilisateurs peuvent essayer d’animer un avion sur le chemin courbe fourni.

AU NOUVEAU vous aide à créer des expériences utilisateur captivantes qui ont un impact énorme sur la satisfaction client, la perception de la marque et les taux de conversion. Leurs architectes et concepteurs d’interfaces visuelles expérimentés exploitent les meilleures pratiques en matière de recherche et de principes de conception UX. Contactez-nous pour toute question.

Exercice d’animation sur la trajectoire de vol

Voici la code complet et démo.

VOUS TROUVEZ CECI UTILE ? PARTAGEZ-LE