animation rendu plus responsif pour s'assurer qu'une image ne soit jamais trop grand par rapport à .gallery-animation

test_anim/CLAUDE.md

@@ -0,0 +1,53 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a **prototype for an animated image gallery component** intended for integration into a Kirby CMS project. The animation displays images in a continuous scrolling pattern across multiple columns/rows.
+
+## Running the Project
+
+This is a PHP project with no build system. To run locally:
+```bash
+php -S localhost:8000
+```
+Then open `http://localhost:8000` in a browser.
+
+## Architecture
+
+### Configuration (index.php:1-28)
+
+The animation is configured via PHP variables at the top of `index.php`:
+- `$mode`: `'vertical'` or `'horizontal'` - scroll direction
+- `$set`: Image set name (e.g., `'LEGACY'`, `'OLLY'`)
+- `$secondsPerImage`: Controls animation speed
+- `$imagesSets`: Associative array defining image paths per set
+
+### Animation System
+
+**CSS-based infinite scroll** using duplicated images:
+- Images are rendered twice in each track (`index.php:63-68`) to create seamless looping
+- Animation translates from 0 to -50% (or vice versa), jumping back invisibly when the duplicate starts
+- Odd columns scroll down/right; even columns scroll up/left
+- Column offsets and delays are calculated based on image count to stagger the animation
+
+**Key CSS classes** (BEM notation):
+- `.gallery-animation--vertical` / `.gallery-animation--horizontal`: Mode modifiers
+- `.gallery-animation__wrapper`: Flex container for columns
+- `.gallery-animation__column`: Individual scrolling lane
+- `.gallery-animation__track`: Animated element containing images
+- `.gallery-animation__image`: Individual image styling
+
+**CSS custom properties**:
+- `--animation-duration`: Total cycle duration (set via PHP)
+- `--gap`: Spacing between columns/rows
+- `--vertical-wrapper-width`: Container width in vertical mode
+
+### Accessibility
+
+Respects `prefers-reduced-motion` by disabling animations (`style.css:149-153`).
+
+## Language
+
+Code comments and documentation are in French.

test_anim/index.php

@@ -1,7 +1,7 @@
 <?php
 // Configuration
-$mode = 'vertical'; // 'vertical' ou 'horizontal'
+$mode = 'horizontal'; // 'vertical' ou 'horizontal'
-$set = 'LEGACY';    // 'LEGACY' ou 'OLLY'
+$set = 'OLLY';    // 'LEGACY' ou 'OLLY'
 $secondsPerImage = 8; // vitesse : secondes pour défiler une image
 
 $imagesSets = [
@@ -27,14 +27,26 @@ $images = $imagesSets[$set];
 $count = count($images);
 $duration = $count * $secondsPerImage; // durée calculée selon le nombre d'images
 
-// Décalage par colonne basé sur le nombre d'images
+// Décalage par colonne/rangée basé sur le nombre d'images
-// Colonnes 1 et 3 vont dans la même direction, donc décalées de 1/2
+// Colonnes/rangées impaires vont dans la même direction
-// Colonne 2 va dans l'autre direction, décalée de 1/4
+// Colonnes/rangées paires vont dans l'autre direction
-$columns = [
+if ($mode === 'horizontal') {
-  ['offset' => 0,                    'delay' => 0],
+  // 5 rangées pour le mode horizontal
-  ['offset' => (int)($count / 3),    'delay' => $duration / 4],
+  $columns = [
-  ['offset' => 0,                    'delay' => $duration / 2],
+    ['offset' => 0,                    'delay' => 0],
-];
+    ['offset' => (int)($count / 5),    'delay' => $duration / 5],
+    ['offset' => (int)(2 * $count / 5),'delay' => 2 * $duration / 5],
+    ['offset' => (int)($count / 5),    'delay' => 3 * $duration / 5],
+    ['offset' => 0,                    'delay' => 4 * $duration / 5],
+  ];
+} else {
+  // 3 colonnes pour le mode vertical
+  $columns = [
+    ['offset' => 0,                    'delay' => 0],
+    ['offset' => (int)($count / 3),    'delay' => $duration / 4],
+    ['offset' => 0,                    'delay' => $duration / 2],
+  ];
+}
 
 function getShiftedImages($images, $offset) {
   return array_merge(

test_anim/style.css

@@ -3,13 +3,16 @@ body {
   min-height: 100vh;
 }
 .gallery-animation {
-  --gap: 40px;
+  --gap: 20px;
+  --half-gap: calc(var(--gap) / 2);
   --vertical-wrapper-width: 900px;
-  --shadow-diffusion: 10px;
+  --shadow-diffusion: 5px;
+  --gallery-animation-width: 40vw;
+  --max-portion : 0.7;
   position: fixed;
   top: 0;
   left: 0;
-  width: 40vw;
+  width: var(--gallery-animation-width);
   height: 100vh;
     overflow: hidden;
 }
@@ -21,6 +24,7 @@ body {
   width: 100%;
   height: 100%;
   display: flex;
+  background-color: green;
 }
 
 .gallery-animation__track {
@@ -49,7 +53,7 @@ body {
 }
 
 .gallery-animation--vertical .gallery-animation__column {
-  width: 100%;
+  width: min(100%, calc(var(--gallery-animation-width) * var(--max-portion)));
   display: flex;
   flex-direction: column;
   align-items: stretch;
@@ -60,14 +64,15 @@ body {
   flex-direction: column;
   align-items: stretch;
   width: 100%;
-  padding-inline: calc(var(--gap) / 2);
+  padding-inline: var(--half-gap);
 }
 
 .gallery-animation--vertical .gallery-animation__image {
   width: 100%;
   height: auto;
+  /* height: calc(100vh * var(--max-portion)); */ /*  */
   object-fit: contain;
-  margin-block: calc(var(--gap) / 2);
+  margin-block: var(--half-gap);
 }
 
 /* Animations verticales */
@@ -96,11 +101,13 @@ body {
 
 .gallery-animation--horizontal .gallery-animation__wrapper {
   flex-direction: column;
-  padding: var(--gap) 0;
+  padding: var(--half-gap) 0;
+  height: auto;
 }
 
 .gallery-animation--horizontal .gallery-animation__column {
-  flex: 1;
+  --gallery-animation__wrapper-inner-height: calc(100vh - var(--half-gap) * 2) ;
+  height: clamp(calc(var(--gallery-animation__wrapper-inner-height) / 5), calc(var(--gallery-animation-width) / 2), calc(var(--gallery-animation__wrapper-inner-height) / 3));
   display: flex;
   flex-direction: row;
   align-items: stretch;
@@ -111,14 +118,14 @@ body {
   flex-direction: row;
   align-items: stretch;
   height: 100%;
-  padding-block: calc(var(--gap) / 2);
+  padding-block: var(--half-gap);
 }
 
 .gallery-animation--horizontal .gallery-animation__image {
-  height: 100%;
+  height: 100%; 
   width: auto;
   object-fit: contain;
-  margin-inline: calc(var(--gap) / 2);
+  margin-inline: var(--half-gap);
 }
 
 /* Animations horizontales */

test_anim__archive1/CLAUDE.md

@@ -0,0 +1,53 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a **prototype for an animated image gallery component** intended for integration into a Kirby CMS project. The animation displays images in a continuous scrolling pattern across multiple columns/rows.
+
+## Running the Project
+
+This is a PHP project with no build system. To run locally:
+```bash
+php -S localhost:8000
+```
+Then open `http://localhost:8000` in a browser.
+
+## Architecture
+
+### Configuration (index.php:1-28)
+
+The animation is configured via PHP variables at the top of `index.php`:
+- `$mode`: `'vertical'` or `'horizontal'` - scroll direction
+- `$set`: Image set name (e.g., `'LEGACY'`, `'OLLY'`)
+- `$secondsPerImage`: Controls animation speed
+- `$imagesSets`: Associative array defining image paths per set
+
+### Animation System
+
+**CSS-based infinite scroll** using duplicated images:
+- Images are rendered twice in each track (`index.php:63-68`) to create seamless looping
+- Animation translates from 0 to -50% (or vice versa), jumping back invisibly when the duplicate starts
+- Odd columns scroll down/right; even columns scroll up/left
+- Column offsets and delays are calculated based on image count to stagger the animation
+
+**Key CSS classes** (BEM notation):
+- `.gallery-animation--vertical` / `.gallery-animation--horizontal`: Mode modifiers
+- `.gallery-animation__wrapper`: Flex container for columns
+- `.gallery-animation__column`: Individual scrolling lane
+- `.gallery-animation__track`: Animated element containing images
+- `.gallery-animation__image`: Individual image styling
+
+**CSS custom properties**:
+- `--animation-duration`: Total cycle duration (set via PHP)
+- `--gap`: Spacing between columns/rows
+- `--vertical-wrapper-width`: Container width in vertical mode
+
+### Accessibility
+
+Respects `prefers-reduced-motion` by disabling animations (`style.css:149-153`).
+
+## Language
+
+Code comments and documentation are in French.

test_anim__archive1/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`

test_anim__archive1/index.php

@@ -0,0 +1,76 @@
+<?php
+// Configuration
+$mode = 'horizontal'; // 'vertical' ou 'horizontal'
+$set = 'OLLY';    // 'LEGACY' ou 'OLLY'
+$secondsPerImage = 8; // vitesse : secondes pour défiler une image
+
+$imagesSets = [
+  'LEGACY' => [
+    'images/LEGACY/apples-averywhere.png',
+    'images/LEGACY/legacy-menu-pause.png',
+    'images/LEGACY/legacy-screen-6.png',
+    'images/LEGACY/legacy-screen-7.png',
+    'images/LEGACY/run-and-eat-to-survive.png',
+    'images/LEGACY/you-won_t-live-forever.png',
+  ],
+  'OLLY' => [
+    'images/OLLY/lesson_contentblock01.png',
+    'images/OLLY/lesson_contentblock04.png',
+    'images/OLLY/lesson_contentblock05.png',
+    'images/OLLY/lesson_cover01.png',
+    'images/OLLY/quiz_choosemode.png',
+    'images/OLLY/quiz_quadmode.png',
+  ],
+];
+
+$images = $imagesSets[$set];
+$count = count($images);
+$duration = $count * $secondsPerImage; // durée calculée selon le nombre d'images
+
+// Décalage par colonne basé sur le nombre d'images
+// Colonnes 1 et 3 vont dans la même direction, donc décalées de 1/2
+// Colonne 2 va dans l'autre direction, décalée de 1/4
+$columns = [
+  ['offset' => 0,                    'delay' => 0],
+  ['offset' => (int)($count / 3),    'delay' => $duration / 4],
+  ['offset' => 0,                    'delay' => $duration / 2],
+];
+
+function getShiftedImages($images, $offset) {
+  return array_merge(
+    array_slice($images, $offset),
+    array_slice($images, 0, $offset)
+  );
+}
+?>
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Test Animation Galerie</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+  <div class="gallery-animation gallery-animation--<?= $mode ?>" style="--animation-duration: <?= $duration ?>s;">
+    <div class="gallery-animation__wrapper">
+      <?php foreach ($columns as $col):
+        $colImages = getShiftedImages($images, $col['offset']);
+      ?>
+      <div class="gallery-animation__column">
+        <div class="gallery-animation__track" style="animation-delay: -<?= $col['delay'] ?>s;">
+          <?php foreach ($colImages as $img): ?>
+          <img src="<?= $img ?>" alt="" class="gallery-animation__image">
+          <?php endforeach; ?>
+          <?php foreach ($colImages as $img): ?>
+          <img src="<?= $img ?>" alt="" class="gallery-animation__image">
+          <?php endforeach; ?>
+        </div>
+      </div>
+      <?php endforeach; ?>
+    </div>
+  </div>
+
+</body>
+</html>

test_anim__archive1/style.css

@@ -0,0 +1,158 @@
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body {
+  min-height: 100vh;
+}
+.gallery-animation {
+  --gap: 20px;
+  --vertical-wrapper-width: 900px;
+  --shadow-diffusion: 5px;
+  --gallery-animation-width: 40vw;
+  --max-portion : 0.7;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: var(--gallery-animation-width);
+  height: 100vh;
+    overflow: hidden;
+}
+
+.gallery-animation__wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background-color: green;
+}
+
+.gallery-animation__track {
+  display: flex;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+.gallery-animation__image {
+  object-fit: cover;
+  flex-shrink: 0;
+  filter: drop-shadow(0px 0px var(--shadow-diffusion) rgb(0, 0, 0));
+}
+
+/* ==========================================================================
+   MODE VERTICAL
+   ========================================================================== */
+
+.gallery-animation--vertical .gallery-animation__wrapper{
+  width: var(--vertical-wrapper-width);
+  flex-direction: row;
+  justify-content: center;
+  padding: 0 var(--gap);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.gallery-animation--vertical .gallery-animation__column {
+  width: min(100%, calc(var(--gallery-animation-width) * var(--max-portion)));
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  overflow: hidden;
+}
+
+.gallery-animation--vertical .gallery-animation__track {
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  padding-inline: calc(var(--gap) / 2);
+}
+
+.gallery-animation--vertical .gallery-animation__image {
+  width: 100%;
+  height: auto;
+  /* height: calc(100vh * var(--max-portion)); */ /*  */
+  object-fit: contain;
+  margin-block: calc(var(--gap) / 2);
+}
+
+/* Animations verticales */
+.gallery-animation--vertical .gallery-animation__column:nth-child(odd) .gallery-animation__track {
+  animation: scrollDown var(--animation-duration) linear infinite;
+}
+
+.gallery-animation--vertical .gallery-animation__column:nth-child(even) .gallery-animation__track {
+  animation: scrollUp var(--animation-duration) linear infinite;
+}
+
+
+@keyframes scrollDown {
+  from { transform: translateY(0); }
+  to { transform: translateY(-50%); }
+}
+
+@keyframes scrollUp {
+  from { transform: translateY(-50%); }
+  to { transform: translateY(0); }
+}
+
+/* ==========================================================================
+   MODE HORIZONTAL
+   ========================================================================== */
+
+.gallery-animation--horizontal .gallery-animation__wrapper {
+  flex-direction: column;
+  padding: var(--gap) 0;
+}
+
+.gallery-animation--horizontal .gallery-animation__column {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  overflow: hidden;
+}
+
+.gallery-animation--horizontal .gallery-animation__track {
+  flex-direction: row;
+  align-items: stretch;
+  height: 100%;
+  padding-block: calc(var(--gap) / 2);
+}
+
+.gallery-animation--horizontal .gallery-animation__image {
+  height: 100%;
+  width: auto;
+  /* width: calc(var(--gallery-animation-width) * var(--max-portion)); */
+  /* width: min(100%, calc(var(--gallery-animation-width) * var(--max-portion))); */
+  object-fit: contain;
+  margin-inline: calc(var(--gap) / 2);
+}
+
+/* Animations horizontales */
+.gallery-animation--horizontal .gallery-animation__column:nth-child(odd) .gallery-animation__track {
+  animation: scrollRight var(--animation-duration) linear infinite;
+}
+
+.gallery-animation--horizontal .gallery-animation__column:nth-child(even) .gallery-animation__track {
+  animation: scrollLeft var(--animation-duration) linear infinite;
+}
+
+
+@keyframes scrollRight {
+  from { transform: translateX(-50%); }
+  to { transform: translateX(0); }
+}
+
+@keyframes scrollLeft {
+  from { transform: translateX(0); }
+  to { transform: translateX(-50%); }
+}
+
+/* ==========================================================================
+   REDUCED MOTION
+   ========================================================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  .gallery-animation__track {
+    animation: none !important;
+  }
+}