diff --git a/test_anim/NOTES.md b/test_anim/NOTES.md new file mode 100644 index 0000000..39807c4 --- /dev/null +++ b/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 +
+ +
+``` + +### 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 +
+
+
+
+ + +
+
+ +
+
+``` + +**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` diff --git a/test_anim/images/LEGACY/apples-averywhere.png b/test_anim/images/LEGACY/apples-averywhere.png new file mode 100644 index 0000000..8739857 Binary files /dev/null and b/test_anim/images/LEGACY/apples-averywhere.png differ diff --git a/test_anim/images/LEGACY/legacy-menu-pause.png b/test_anim/images/LEGACY/legacy-menu-pause.png new file mode 100644 index 0000000..7f70a11 Binary files /dev/null and b/test_anim/images/LEGACY/legacy-menu-pause.png differ diff --git a/test_anim/images/LEGACY/legacy-screen-6.png b/test_anim/images/LEGACY/legacy-screen-6.png new file mode 100644 index 0000000..a2db396 Binary files /dev/null and b/test_anim/images/LEGACY/legacy-screen-6.png differ diff --git a/test_anim/images/LEGACY/legacy-screen-7.png b/test_anim/images/LEGACY/legacy-screen-7.png new file mode 100644 index 0000000..a58506a Binary files /dev/null and b/test_anim/images/LEGACY/legacy-screen-7.png differ diff --git a/test_anim/images/LEGACY/run-and-eat-to-survive.png b/test_anim/images/LEGACY/run-and-eat-to-survive.png new file mode 100644 index 0000000..4f6c0c7 Binary files /dev/null and b/test_anim/images/LEGACY/run-and-eat-to-survive.png differ diff --git a/test_anim/images/LEGACY/you-won_t-live-forever.png b/test_anim/images/LEGACY/you-won_t-live-forever.png new file mode 100644 index 0000000..cbfd4f9 Binary files /dev/null and b/test_anim/images/LEGACY/you-won_t-live-forever.png differ diff --git a/test_anim/images/OLLY/lesson_contentblock01.png b/test_anim/images/OLLY/lesson_contentblock01.png new file mode 100644 index 0000000..0f5865d Binary files /dev/null and b/test_anim/images/OLLY/lesson_contentblock01.png differ diff --git a/test_anim/images/OLLY/lesson_contentblock04.png b/test_anim/images/OLLY/lesson_contentblock04.png new file mode 100644 index 0000000..acf132c Binary files /dev/null and b/test_anim/images/OLLY/lesson_contentblock04.png differ diff --git a/test_anim/images/OLLY/lesson_contentblock05.png b/test_anim/images/OLLY/lesson_contentblock05.png new file mode 100644 index 0000000..2cd70f8 Binary files /dev/null and b/test_anim/images/OLLY/lesson_contentblock05.png differ diff --git a/test_anim/images/OLLY/lesson_cover01.png b/test_anim/images/OLLY/lesson_cover01.png new file mode 100644 index 0000000..301a42f Binary files /dev/null and b/test_anim/images/OLLY/lesson_cover01.png differ diff --git a/test_anim/images/OLLY/quiz_choosemode.png b/test_anim/images/OLLY/quiz_choosemode.png new file mode 100644 index 0000000..478d0ed Binary files /dev/null and b/test_anim/images/OLLY/quiz_choosemode.png differ diff --git a/test_anim/images/OLLY/quiz_quadmode.png b/test_anim/images/OLLY/quiz_quadmode.png new file mode 100644 index 0000000..a02327f Binary files /dev/null and b/test_anim/images/OLLY/quiz_quadmode.png differ diff --git a/test_anim/index.php b/test_anim/index.php new file mode 100644 index 0000000..e1cdf79 --- /dev/null +++ b/test_anim/index.php @@ -0,0 +1,76 @@ + [ + '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) + ); +} +?> + + + + + + Test Animation Galerie + + + + +
+
+ +
+
+ + + + + + +
+
+ +
+
+ + + diff --git a/test_anim/style.css b/test_anim/style.css new file mode 100644 index 0000000..0cf45b6 --- /dev/null +++ b/test_anim/style.css @@ -0,0 +1,152 @@ +* { margin: 0; padding: 0; box-sizing: border-box; } +body { + min-height: 100vh; +} +.gallery-animation { + --gap: 40px; + --vertical-wrapper-width: 900px; + --shadow-diffusion: 10px; + position: fixed; + top: 0; + left: 0; + width: 40vw; + height: 100vh; + overflow: hidden; +} + +.gallery-animation__wrapper { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; +} + +.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: 100%; + 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; + 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; + 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; + } +}