Animation sprite sheet intermédiaireLorsqu'on travaille avec une Sprite Sheet, il faut d'abord créer un élément HTML dont la dimension correspond à celle d’une seule image-clé. Dans cet exemple, 700px par 700px. Et y ajouter notre sprite sheet en background-image.
Cependant, si la dimension de cet cet élément est fixe et si on a un écran plus petit que 700px, l'image sera partiellement hors cadre et l'utilisateur devra défiler la page pour visionner l'ensemble de l'image, ce qui n'est pas très responsive.
Il faudra alors utiliser l'unité de pourcentage de l'espace disponible (%) ou les unités du viewport telles que vw, vh, vmin ou vmax pour faire en sorte que la taille de l'image s'adapte à l'espace disponible par rapport à la taille de l'écran.
Essayons par exemple une largeur de 50vw (viewport width). Afin que l'image conserve son ratio largeur/hauteur, utilisons la propriété CSS aspect-ratio. Dans le cas actuel le ratio est littéralement 1 pour 1 car l'image-clés est de 700px X 700px. Dans un autre cas, il faudra réduire la fraction jusqu'à avoir la fraction irréductible, celle-ci sera donc la valeur de aspect-ratio. Vous pouvez utiliser des outils en ligne pour réduire vos fractions tels que celui-ci.
Voici le résultat:
On remarque que l'image déborde de son cadre.
- Il faudra alors changer le background-sizeafin d'ajuste la première image-clé dans son conteneur, peu importe sa dimension. Vous pouvez désactiver l'animation le temps de tester celà.
- Puis, dans l'animaiton même, vous devrez ajuster le déplacement de la valeur du background-position pour être en accord avec la largeur de l'élément, peu importe sa dimension."
- Allez-y en toute logique, sachant qu'il y a un nombre défini d'images-clés.
En vous basant sur cette information, je vous laisse essayer de comprendre comment on peut faire une "sprite sheet" réactive avec cet exercice exploratoire: