# 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`