50 lines
1.3 KiB
Markdown
50 lines
1.3 KiB
Markdown
# 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`
|