Star Wars – Le Réveil de la Force sort aujourd’hui dans les salles obscures ! Le moment est donc idéal pour apprendre à refaire le fameux générique grâce à un petit peu de HTML et de CSS.

Le HTML

Voici le HTML très simple. La première div contient le texte initial de l’animation. Celui-ci est visible au milieu de l’écran puis disparait pour laisser sa place au texte déroulant :

<div class="a-long-time-ago">
  A long time ago, in a galaxy far,
  <br> far away...
</div>
<div class="crawl">
  <div>
    <p>
      It is a period of civil war. Rebel spaceships, striking from a hidden base, 
      have won their first victory against the evil Galactic Empire.
    </p>
    <p>
      During the battle, Rebel spies managed to steal secret plans to the Empire's ultimate weapon, 
      the DEATH STAR, an armored space station with enough power to destroy an entire planet.
    </p>
    <p>
      Pursued by the Empire's sinister agents, Princess Leia races home aboard her starship, 
      custodian of the stolen plan that can save her people and restore freedom to the galaxy...
    </p>
  </div>
</div>

Le CSS

Le CSS est un peu plus compliqué donc allons-y étapes par étapes. Commençons par le plus simple, le fond noir et le texte jaune :

html,
body {
    width: 100%;
    height: 100%;
    background: black;
    margin: 0;
    overflow: hidden; /* Evite la scrollbar */
  
    /* Center les éléments */
    display: flex;
    align-items: center;
    justify-content: center;
}

Les flexbox sont encore peu utilisés (principalement à cause de la compatibilité) mais sont très pratiques pour le placement des éléments, y compris pour des cas simples tels que le centrage vertical. Pour en savoir plus, vous pouvez regarder la documentation sur MDN.

Les animations

Puis il faut afficher la première phrase au milieu de l’écran et la faire disparaitre. Pour cela j’utilise la propriété animation et les @keyframes. Cela permet de définir la valeur de chaque propriété à animer au cours de l’animation. La timing-function est la fonction d’interpolation à utiliser pour passer d’un état à l’autre.

.a-long-time-ago {
    /* cosmétique */
    font-size: 32px;
    color: #4bd5ee;
    /* Animation: Apparition et disparition progressive */
    opacity: 0;
    animation-delay: 1s;
    animation-duration: 1s;
    animation-name: a-long-time-ago;
    animation-timing-function: ease-out;
}
@keyframes a-long-time-ago {
    0%   { opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { opacity: 0; }
}

Pour le texte déroulant l’idée est la même, utiliser une animation pour passer du bas au haut de l’écran. Pour avoir l’impression que le texte part vers l’horizon, on utilise une transformation 3D : transform: perspective(280px) rotateX(25deg);

Voici le résultat de cette transformation sur un carré :

Le résultat final

Pour aller plus loin il est possible d’ajouter un peu de musique via la balise HTML5 audio. Pensez à utiliser plusieurs formats pour être bien compatibles avec les principaux navigateurs :

<audio preload="auto">
    <source src="Star-Wars.ogg" type="audio/ogg" />
    <source src="Star-Wars.mp3" type="audio/mpeg" />
</audio>

Pour l’épisode 4, le générique a été fait comme cela :

Comme quoi, pas besoin de nouvelles technologies, de bonnes idées et un peu de bricolage permettent de réaliser beaucoup de choses :)