Faire son site 10

Mongolfière

J'ai voulu documenter les propriétés relatives aux masques (mask) dans les références CSS et j'ai fini par me rendre à l'évidence, Internet Explorer, dans sa dernière version, ne les supporte pas. C'est assez paradoxal car les masques sont utilisés avec l'aide de la fonction bitblt() (ou stretchblt()) de l'API de Windows. Un masque est traditionnellement utilisé dans le traitement des images ou bien en programmation pour l'affichage d'mages sur un fond indéterminé. Si vous voulez voir l'utilisation d'un vrai masque allez voir sur ce site, cest un vieux CV de la fin des années 90. Sur la page V.B. 4, cliquez sur "Ecran de veille".

Revenons à notre animation. J'ai utilisé deux photos. La première sert de fond et, sur la deuxième, j'ai juste récupéré le ballon qui se promène sur notre fond. L'image à droite de l'animation représente le ballon dans sa taille réelle tandis que la photo tout à droite représente la mongolfière dans son état au démarrage de l'animation.

C'est l'exemple même de la bêtise que l'on fait quand on est trop sûr de soi. Les utilisateurs d'Internet Explorer comprendront. Pour les autres, j'explique. L'animation ne fonctionne pas sous Explorer. Même préfixée, la propriété background-size ne supporte pas d'être modifiée dans le keyframe. Je suis sans doute un peu crétin mais je ne comprends pas que ce machin soit le navigateur le plus utilisé. Bref! En cliquant ici, vous aurez une version qui ne me plait que modérément mais qui fonctionne même avec Explorer. Les explications restent valables.

Le fond ne présente aucune difficulté, il suffit de ne pas oublier de mettre la propriété overflow pour ne pas être gêné par la mongolfière lorsqu'elle est en dehors du cadre. Par contre, vous pouvez très bien la mettre sous forme de commentaire (/* overflow: hidden; */) pour vous faciliter la tâche lors du positionnement de l'image.

Pour la mongolfière, il y avait la possibilité d'utiliser la balise <img> à la place de la balise <div>. Cela n'aurait rien changé de particulier car, en général, les connexions d'aujourd'hui sont suffisamment bonnes pour supporter l'une ou l'autre méthode. La discussion peut s'entamer si l'on pense à ceux qui n'ont qu'une connexion par modem avec des débits particulièrement bas.

Lorsque l'on charge une page, l'interpréteur va la lire de haut en bas et l'exécuter dans le sens de la lecture. Si vous chargez vos images en premier, votre page sera un peu plus longue à apparaître mais seront disponibles instantanément dès qu'elles devront être affichées. C'est particulièrement important si vos images doivent être animées.

Pour pouvoir mettre les images dans le cache, tout de suite après la balise <body>, il faut faire comme si on affichait les images et les rendre invisibles.

<div style="width: 0px; height: 0px;">
  <img src="image1.jpg" width="600" height="400">
  <img src="image2.jpg" width="600" height="400">
  <img src="image3.jpg" width="600" height="400">
  <img src="image4.jpg" width="600" height="400">
  <img src="image5.jpg" width="600" height="400">
</div>
abc

Essayez le code ci-dessus. Les images n'apparaissent pas et "abc" est écrit en haut à gauche de la page. Si vous remplacez la balise <div> par celle qui est placée en commentaires, les images n'apparaitront pas mais "abc" sera placé beaucoup trop bas dans la page.

Une autre possibilité s'offre à vous pour le chargement des photos, c'est le format jpg progressif. Dans les options d'enregistrement des images au format jpg, vous trouverez cette option. Elle a le mérite de nous permettre de ne pas trop compresser les images.

Après cet intermède, revenons à nos moutons. Dans #mongolf, on commence par mettre en place la mongolfière (taille, position et inclinaison). On a déjà vu la fonction skewx() de la propriété transform qui nous permet d'incliner la mongolfière. Elle fait partie, avec une vingtaine d'autres fonctions des <transform-function> qui offrent la possibilité d'effectuer toutes sortes de manipulations sur les éléments de nos pages.

Une nouvelle propriété fait son apparition, c'est animation-play-state. Je l'utilise ici pour mettre en pause l'animation lorsque la souris passe dessus, que ce soit sur le fond ou sur la mongolfière. Elle ne connait que deux valeurs, running et paused. On peut utiliser cette propriété comme ici pour vérifier le bon fonctionnement d'une animation (vérifier la trajectoire de la mongolfière) ou bien pour synchroniser plusieurs animations qui s'éxécutent simultanément.

La propriété animation-delay fait en sorte que l'animation ne démarre qu'après un délai de deux secondes ce qui laisse le temps aux deux images d'être chargées complètement avant de se mettre au boulot.

La règle @keyframes nous permet de décrire les différentes étapes de notre animation.

A 0% de l'animation, on fixe juste la taille de la mongolfière. La taille de la balise <div> est fixée par width et height tandis que l'image de fond est donnée par background-size.

A 40%, la mongolfière retrouve sa taille originale et atteint le point où elle va très légèrement dévier sa course.

A 60%, la mongolfière retrouve sa forme sans déformation et elle n'en changera pas jusqu'à la fin de l'animation.

A 80% et à 100%, la mongolfière est sortie de l'animation et reste immobile pendant ces 20% d'écart. Ceci est fait afin qu'il y ait un délai de trois secondes (20% de 15 secondes) entre chaque exécution de l'animation.