77 lines
2.4 KiB
PHP
77 lines
2.4 KiB
PHP
|
<?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>
|