studio-variable/world-game
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

prototype pour l'animation galerie d'images dans test_anim à la récine

Browse source
This commit is contained in:
antonin gallon 2026-01-20 16:18:57 +01:00
parent d04048549a
commit 0e981e990f
15 changed files with 278 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

76
test_anim/index.php Normal file
View 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>