world-game/test_anim/NOTES.md

Animation Galerie d'Images

Fichiers

• style.css : CSS de l'animation (à intégrer dans le projet Kirby)
• index.html : Page de test
• images/ : Images de test

Usage

<div class="gallery-animation gallery-animation--vertical">
  <!-- ou gallery-animation--horizontal -->
</div>

Variables CSS

.gallery-animation {
  --animation-duration: 30s;  /* Durée de l'animation */
  --gap: 1rem;                /* Espacement entre colonnes/rangées */
}

Structure HTML

Mode vertical (3 colonnes) :

<div class="gallery-animation gallery-animation--vertical">
  <div class="gallery-animation__wrapper">
    <div class="gallery-animation__column">
      <div class="gallery-animation__track">
        <img src="..." class="gallery-animation__image">
        <!-- images dupliquées pour boucle infinie -->
      </div>
    </div>
    <!-- 2 autres colonnes -->
  </div>
</div>

Mode horizontal (3 rangées) : remplacer --vertical par --horizontal et __column par __row.

Comportement

• Colonnes impaires : défilent vers le bas / droite
• Colonnes paires : défilent vers le haut / gauche
• Images dupliquées dans le HTML pour transition fluide
• Décalage automatique entre colonnes/rangées via animation-delay