prototype pour l'animation galerie d'images dans test_anim à la récine

test_anim/NOTES.md

@@ -0,0 +1,50 @@
+# 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
+
+```html
+<div class="gallery-animation gallery-animation--vertical">
+  <!-- ou gallery-animation--horizontal -->
+</div>
+```
+
+### Variables CSS
+
+```css
+.gallery-animation {
+  --animation-duration: 30s;  /* Durée de l'animation */
+  --gap: 1rem;                /* Espacement entre colonnes/rangées */
+}
+```
+
+### Structure HTML
+
+**Mode vertical** (3 colonnes) :
+```html
+<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`