Principe de l'animation
Le prototype Lemmings CSS Animation transforme chaque ligne de texte d’une page en une plateforme virtuelle. Chaque plateforme agit comme un floor sur lequel des entités graphiques, appelées « walkers », peuvent se déplacer latéralement puis chuter lorsqu’une ligne plus courte se trouve en dessous. Le comportement repose exclusivement sur le moteur de rendu CSS : aucune logique JavaScript n’est invoquée pour calculer la trajectoire ou détecter les collisions.
Le texte reste transparent pour les walkers : les lignes sont espacées de façon à ce que la hauteur d’un walker dépasse l’interligne, garantissant que le texte ne constitue jamais un obstacle. En revanche, les bordures, boîtes, boutons, images et champs de formulaire sont rendus opaques et interrompent le déplacement, ce qui empêche les walkers de rester coincés entre deux lignes de paragraphe.
Mécanique de déplacement et collisions
Les walkers sont animés à l’aide de @keyframes qui décrivent une accélération verticale constante, simulant la gravité. La durée de chaque cycle d’animation est calibrée pour que la vitesse de chute corresponde à la hauteur d’une ligne, assurant un alignement précis lorsqu’un walker atteint le plancher suivant. Les collisions avec les éléments non textuels sont gérées par la superposition des couches CSS : les éléments avec z-index supérieur masquent les walkers, interrompant ainsi le mouvement et déclenchant une nouvelle animation de « marche » horizontale.
Le système exploite la propriété pointer-events:none sur le texte afin d’éviter toute interférence avec les événements de rendu, tandis que les bordures et les boîtes conservent leurs propriétés par défaut, ce qui crée une différenciation claire entre les surfaces traversables et les obstacles.
Gestion du redimensionnement et limites
Lorsque la fenêtre du navigateur est redimensionnée, le flux de texte se reconstitue : les lignes se raccourcissent ou s’allongent, modifiant la topologie des plateformes. Cette reconfiguration déclenche automatiquement un « resize launch », c’est‑à‑dire le redémarrage de l’animation des walkers depuis leurs positions actuelles. Le mécanisme repose sur le recalcul du layout CSS, qui réinitialise les valeurs d’animation sans intervention du script.
Un plancher long situé en bas de la page agit comme un filet de sécurité, capturant tout walker qui aurait traversé toutes les lignes précédentes. Cette conception garantit que l’animation ne génère pas d’objets hors‑cadre, même lors de changements de résolution extrêmes. Cependant, l’approche purement CSS présente des limites : l’absence de logique conditionnelle empêche la prise en compte de scénarios complexes, comme la création dynamique de nouvelles plateformes ou la modification du comportement en fonction de l’interaction utilisateur. De plus, la dépendance à la précision du moteur de rendu signifie que des variations subtiles entre navigateurs peuvent affecter la synchronisation des collisions.
