Des images et des fantasticodeurs, 3ème partie : animer le fantôme de pacman avec du css
Nous voilà avec une jolie troupe de fantômes. Pour la suite, quelques (petites) notions de html et css sont nécessaires.
Les fantasticodeurs ne sont plus (tout à fait) des débutants, mais un petit rafraîchissement de mémoire ne fera pas de mal. On lance un éditeur de texte, et on crée la structure du html. Un h1, quelques p, avec des a si possible, et une img pour faire joli. Et maintenant, dans un fichier css, une touche de font-family, de la color bien sûr, quelques :hoverpour mettre un peu de vie. C’est bon, ils se souviennent.
Reprenons notre fantôme ᗧ•••ᗣ••
C’est un fichier SVG, on va donc pouvoir l’importer comme n’importe quelle image, avec une baliseimg, comme ça :
<img src="fantome.svg" alt="fantôme">Ok, ça marche bien, mais ça n’a pas l’air de passionner les fantasticodeurs.
Mais c’est un fichier SVG, on peut donc aussi l’ouvrir avec l’éditeur de texte, copier tout ce qu’il y a dedans et le coller dans le fichier html. C’est là que ça commence à devenir intéressant. Ben oui, ça ressemble fortement au html que les enfants viennent juste de réviser, on dirait bien qu’on va pouvoir jouer un peu :-)
Essayons de nous y retrouver :
<circle
style="fill:#000000"
id="path4199"
cx="309.54041"
cy="132.49414"
r="12.397113" />Ça, c’est un cercle noir. Une pupille. Il y a trois autres cercles qui ensemble forment les yeux. En l’occurence, on les reconnaît grâce à la balisecircle et à la couleur (fill:#000000), mais si le dessin était plus compliqué on pourrait simplement utiliser les outils de développement du navigateur.
Le corps du fantôme n’est pas une forme géométrique de base comme un cercle, c’est un chemin (path) :
<path
id="path4153"
d="M 81.788502,5.3389794 A 75.544907,75.544907 0 0 0 6.4174018,77.397573 l -0.17382,0 0,3.48633 0,97.240227 18.8867102,-20 18.88477,20 18.88672,-20 18.88672,20 18.886718,-20 18.88476,20 18.88672,-20 18.88672,20 0,-97.240227 0,-3.48633 -0.12305,0 A 75.544907,75.544907 0 0 0 81.788502,5.3389794 Z"
style="fill:#ff5555" />Maintenant, on va ajouter du css, pour que le corps du fantôme change de couleur lorsqu’on le survole avec la souris. On commence par supprimer l’attribut style, et à la place on met une classe :
<path
class="corps"
id="path4153"
d="M 81.788502,5.3389794 A 75.544907,75.544907 0 0 0 6.4174018,77.397573 l -0.17382,0 0,3.48633 0,97.240227 18.8867102,-20 18.88477,20 18.88672,-20 18.88672,20 18.886718,-20 18.88476,20 18.88672,-20 18.88672,20 0,-97.240227 0,-3.48633 -0.12305,0 A 75.544907,75.544907 0 0 0 81.788502,5.3389794 Z"/>Dans le fichier css, on recopie ce qu’il y avait dans l’attribut style :
.corps {
fill:#ff5555;
}Maintenant, on peut changer la couleur du fantôme au survol, exactement comme on fait avec une bête balise a:
.corps:hover {
fill: #7b7bf0;
}Et pour que la transition soit plus douce :
.corps {
...
transition: fill ease 0.5s;
}Et voilà, on a manipulé un petit bout de svg avec du css, comme on le fait avec n’importe quelle balise html. La seule nouveauté c’est la propriété fill, propre à SVG, alors que d’habitude on utilise color ou background-color. Avec l’oeil ça marche aussi :
C’est quand même drôlement plus chouette, comme image, non ? Et à partir de là, on peut imaginer plein de choses, en s’inspirant par exemple de notre fantôme modèle. Ici, il y a une animation sur tout le svg, qui fait se promener le fantôme, et une autre animation pour le clignement des yeux. C’est plus compliqué car il s’agit d’animations, et pas juste d’un survol, mais ça reste du css classique.
Avec deux copier-coller, les enfants reproduisent ces animations. Je passe très très vite sur les explications ; le but n’est pas qu’ils comprennent tout ça dans les détails, mais qu’ils voient que c’est à leur portée.
