Après l’animation de Pac-Man en CSS3, voici le fameux générique de Star Wars revisité à la sauce CSS. Inutile de rappeler à quoi ressemble ce générique aux geeks que nous sommes et là, tout y est : le logo Star Wars avec son style bien particulier et le texte qui suit en perspective servant d’introduction. Tout comme Pacmanimation, cette animation n’utilise pas de JavaScript ni d’images : tout est fait en HTML et CSS, ce qui lui confère bien évidemment une bonne vitesse de chargement.

Vous pouvez découvrir cette animation en suivant ce lien qui est une simple démonstration. Car en effet, si vous souhaitez intégrer une telle animation sur vos sites web, pas de soucis puisque Craig Buckler, l’auteur de ce code, nous indique comment faire dans cet article.

Alors bien sûr, c’est inutile, nous sommes bien d’accord, cette animation est à placer dans la catégories des trucs qui ne servent qu’à impressionner les jolies filles (ou pas). Et ça nous amène à un des points les plus importants : avec quels navigateurs est-ce compatible ? Car on commence à en avoir l’habitude maintenant, tout ce qui est fait avec CSS3 est récent et donc tout le monde ne peut pas en profiter.

Et c’est donc le cas des utilisateurs… d’Internet Explorer (non non, c’est une surprise totale, on ne s’en doutait absolument pas). Ces derniers sont les plus mal lotis car ils ne verront rien (sauf sous IE10) mais ils ne seront pas les seuls à avoir des soucis. En effet, Opera ne gère pas encore les transformations 3D donc l’aspect perspective ne sera pas là. Cependant, les utilisateurs de ce navigateur pourront tout de même voir le texte défiler. Autrement, l’animation fonctionne parfaitement sous Firefox, Chrome et Safari.