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