prototype pour l'animation galerie d'images dans test_anim à la récine
This commit is contained in:
parent
d04048549a
commit
0e981e990f
15 changed files with 278 additions and 0 deletions
50
test_anim/NOTES.md
Normal file
50
test_anim/NOTES.md
Normal file
|
|
@ -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`
|
||||||
BIN
test_anim/images/LEGACY/apples-averywhere.png
Normal file
BIN
test_anim/images/LEGACY/apples-averywhere.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
BIN
test_anim/images/LEGACY/legacy-menu-pause.png
Normal file
BIN
test_anim/images/LEGACY/legacy-menu-pause.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
BIN
test_anim/images/LEGACY/legacy-screen-6.png
Normal file
BIN
test_anim/images/LEGACY/legacy-screen-6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 MiB |
BIN
test_anim/images/LEGACY/legacy-screen-7.png
Normal file
BIN
test_anim/images/LEGACY/legacy-screen-7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
BIN
test_anim/images/LEGACY/run-and-eat-to-survive.png
Normal file
BIN
test_anim/images/LEGACY/run-and-eat-to-survive.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 MiB |
BIN
test_anim/images/LEGACY/you-won_t-live-forever.png
Normal file
BIN
test_anim/images/LEGACY/you-won_t-live-forever.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
BIN
test_anim/images/OLLY/lesson_contentblock01.png
Normal file
BIN
test_anim/images/OLLY/lesson_contentblock01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 818 KiB |
BIN
test_anim/images/OLLY/lesson_contentblock04.png
Normal file
BIN
test_anim/images/OLLY/lesson_contentblock04.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 MiB |
BIN
test_anim/images/OLLY/lesson_contentblock05.png
Normal file
BIN
test_anim/images/OLLY/lesson_contentblock05.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 574 KiB |
BIN
test_anim/images/OLLY/lesson_cover01.png
Normal file
BIN
test_anim/images/OLLY/lesson_cover01.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.1 MiB |
BIN
test_anim/images/OLLY/quiz_choosemode.png
Normal file
BIN
test_anim/images/OLLY/quiz_choosemode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
BIN
test_anim/images/OLLY/quiz_quadmode.png
Normal file
BIN
test_anim/images/OLLY/quiz_quadmode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
76
test_anim/index.php
Normal file
76
test_anim/index.php
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
<?php
|
||||||
|
// Configuration
|
||||||
|
$mode = 'vertical'; // 'vertical' ou 'horizontal'
|
||||||
|
$set = 'LEGACY'; // '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>
|
||||||
152
test_anim/style.css
Normal file
152
test_anim/style.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue