Star Wars

Sortez les popcorns ! Aujourd’hui, nous allons créer le titre de la bande annonce de Star Wars ‘Le Réveil de la Force’.

Notre exemple associe l’animation CSS à quelques autres propriétés CSS utiles, en particulier les transformations scale, translate et rotate.

Transformations

On pourrait penser que la propriété transform crée une animation, mais en réalité elle est utilisée pour définir la position statique, la déformation ou le redimensionnement d’un élément. Nous pouvons l’utiliser pour créer de superbes effets mais pour cela nous avons besoin d’un transform différent pour chaque keyframe ou chaque état que nous animons.

Transform: scale(), translateZ() et rotateY()

Nous pouvons agrandir ou rapetisser des éléments grâce à scale. Avec translateZ, nous pouvons déplacer des éléments sur l’axe des Z. Cet axe correspond à une ligne que vous traceriez depuis vous jusqu’à l’écran.

Dans le cas présent, j’utiliserai un mélange de scale et translateZ pour créer l’illusion que les mots volent dans l’espace.

Enfin, nous utiliserons rotateY pour faire tourner sur elles-mêmes les lettres du sous-titre. Pour les faire tourner sur l’axe des Y nous ferons travailler notre navigateur en 3D.

SVG, HTML et CSS

Pour préparer cet exemple, j’ai créé deux fichiers SVG pour les mots Star et Wars du logo. N’hésitez pas à les télécharger si vous voulez jouer avec pour suivre la démo.

Le HTML de la démo est le suivant :

<div class="starwars-demo">
  <img src="https://cssanimation.rocks/demo/starwars/images/star.svg" alt="Star" class="star">
  <img src="https://cssanimation.rocks/demo/starwars/images/wars.svg" alt="Wars" class="wars">
  <h2 class="byline" id="byline">The Force Awakens</h2>
</div>

Une image statique d’étoiles est utilisée pour l’arrière-plan. La police de caractères du sous-titre a été compliquée à trouver, alors pour cet exemple j’ai choisi la police web "Lato".

Le positionnement absolu du contenu au centre de l’écran nous donne ceci :

Animer Star et Wars

Nous voulons que le texte principal disparaisse en fade out, et nous voulons également que sa taille diminue progressivement. C’est un excellent cas d’utilisation de la transformation scale(). Utilisons-la sur le mot "Star" avec ces keyframes :

@keyframes star {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(-0.75em);
  }
  20% {
    opacity: 1;
  }
  89% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: translateZ(-1000em);
  }
}

Il y a deux propriétés qui changent durant cette animation, opacity et transform. Le changement d’opacité le fait démarrer transparent puis disparaître à la fin, de façon à ce que nous puissions reprendre l’animation en boucle.

La transformation commence par la définition de scale à 1.5. Cela signifie que la taille du texte au départ est à 150% de sa taille normale. À 89%, nous fixons la propriété transform sur une scale de 1. Autrement dit, entre 0% et 89%, la dimension passe de 150% à 100%.

Le transformZ final fait disparaître rapidement les mots.

Nous pouvons appliquer ces keyframes au mot "Star" ainsi :

.star {
  animation: star 10s ease-out infinite;
}
.wars {
  animation: wars 10s ease-out infinite;
}

La propriété animation définit ici une animation que nous avons appelée star ayant une durée de 10 secondes. Elle applique la fonction intégrée de timing ease-out et elle indique qu’elle doit se répéter indéfiniment. Nous appliquons une règle similaire pour le mot "Wars".

Créer la 3D

Pour utiliser les transformations 3D en CSS, que ce soit pour déplacer un élément le long de l’axe des Z ou pour le faire tourner sur les axes des Y ou des Z, il faut créer un cadre pour la 3D. En termes HTML, cela signifie qu’il faut créer un container et indiquer au navigateur que ce sera le cadre de notre 3D.

Pour cela, nous ajoutons ceci à notre div .starwars-demo :

.starwars-demo {
  perspective: 800px;
  transform-style: preserve3d;
}

Ces deux propriétés indiquent au navigateur que les éléments enfants du container doivent être positionnés en 3D et non à plat. [CSS Tricks[ donne de plus amples détails sur la propriété.

Par ailleurs, la propriété perspective indique au navigateur la "profondeur" de la scène. Ici, nous avons choisi 800px. Des valeurs plus réduites créent des perspectives plus "extrêmes" car le point de fuite est plus rapproché.

Maintenant que cette partie est au point, passons au sous-titre.

Le Réveil de la Force

Dans la bande-annonce, les lettres du sous-titre tournent sur elles-mêmes. Nous pouvons recréer cet effet grâce à la transformation rotateY. Dans cet exemple, nous avons inséré chaque lettre dans un élément span, de façon à pouvoir animer chacune.

Mais je me suis rapidement rendu compte d’un problème : il n’existe pas de manière simple d’animer chacune des lettres du sous-titre. Ma première approche était d’insérer manuellement chacune des lettres dans une balise span. Ça marchait, mais le HTML était un peu confus. La démo actuelle inclut un peu de JavaScript (merci à Tady pour son assistance) qui insère automatiquement chaque lettre dans un span.

Appliquons maintenant une animation à chaque lettre.

D’abord, les keyframes :

@keyframes spin-letters {
  0%, 10% {
    opacity: 0;
    transform: rotateY(90deg);
  }
  30% {
    opacity: 1;
  }
  70%, 86% {
    transform: rotateY(0);
    opacity: 1;
  }
  95%, 100% {
    opacity: 0;
  }
}

On commence par faire tourner les lettres de 90 degrés, puis aux alentours de 70% de l’animation elles font face au spectateur.

Nous pouvons appliquer cet ensemble de keyframes à chaque span de cette façon :

.byline span {
  animation: spin-letters 10s linear infinite;
}
.byline {
  animation: move-byline 10s linear infinite;
}

Le résultat est que chaque span contenant une lettre va disparaître et tourner sur lui-même lentement, avant de s’effacer à la fin de l’animation.

Si on met tout ensemble, nous avons notre démo finale.

Make sure to follow on Twitter for all the latest updates!