diff --git a/site/blueprints/pages/project.yml b/site/blueprints/pages/project.yml index b5be544..80d2164 100644 --- a/site/blueprints/pages/project.yml +++ b/site/blueprints/pages/project.yml @@ -103,6 +103,18 @@ columns: uploads: template: image help: Petite image carrée représentant le jeu + galleryAnimationMode: + label: Mode d'animation de la galerie + type: toggles + default: vertical + options: + - value: vertical + text: Vertical + icon: arrow-up-down + - value: horizontal + text: Horizontal + icon: arrow-left-right + help: "Direction du défilement des images dans la galerie animée" galleryBackgroundColor: label: Couleur d'arrière-plan de la galerie animée type: color diff --git a/site/plugins/world-game-icons/index.js b/site/plugins/world-game-icons/index.js index 84bc7f7..2f90750 100644 --- a/site/plugins/world-game-icons/index.js +++ b/site/plugins/world-game-icons/index.js @@ -5,5 +5,9 @@ panel.plugin("adrienpayet/world-game-icons", { stack: '', blog: '', + "arrow-up-down": + '', + "arrow-left-right": + '', }, }); diff --git a/site/templates/portfolio.json.php b/site/templates/portfolio.json.php index 5ee09a4..9335ccd 100644 --- a/site/templates/portfolio.json.php +++ b/site/templates/portfolio.json.php @@ -17,6 +17,7 @@ $specificData = [ 'mockup' => $project->mockup()->toFile()?->url(), 'mockupSrcset' => $project->mockup()->toFile()?->srcset('mockup'), 'mockupWebp' => $project->mockup()->toFile()?->srcset('mockup-webp'), + 'galleryAnimationMode' => $project->galleryAnimationMode()->value() ?: 'vertical', 'galleryBackgroundColor' => $project->galleryBackgroundColor()->value(), 'galleryBackgroundImage' => $project->galleryBackgroundImage()->isNotEmpty() ? $project->galleryBackgroundImage()->toFile()->url() : null, 'keywords' => $project->keywords()->toStructure()->map(fn($i) => [ diff --git a/src/components/ui/GalleryAnimation.svelte b/src/components/ui/GalleryAnimation.svelte index 46c9b2b..f36605f 100644 --- a/src/components/ui/GalleryAnimation.svelte +++ b/src/components/ui/GalleryAnimation.svelte @@ -1,19 +1,32 @@
@@ -72,7 +85,22 @@ opacity: .8; } - /* Vertical mode (Portfolio) */ + .gallery-animation__overlay { + position: absolute; + inset: 0; + background-color: #000; + opacity: .5; + } + + :global(.gallery-animation__image) { + display: block; + object-fit: contain; + } + + /* ========================================================================== + MODE VERTICAL — 3 colonnes + ========================================================================== */ + .gallery-animation--vertical { display: flex; flex-direction: row; @@ -105,18 +133,9 @@ animation-duration: var(--gallery-duration); } - .gallery-animation__overlay { - position: absolute; - inset: 0; - background-color: #000; - opacity: .5; - } - - :global(.gallery-animation__image) { + .gallery-animation--vertical :global(.gallery-animation__image) { width: 100%; height: auto; - display: block; - object-fit: contain; } @keyframes galleryScrollDown { @@ -129,6 +148,65 @@ to { transform: translateY(0); } } + /* ========================================================================== + MODE HORIZONTAL — 5 rangées + ========================================================================== */ + + .gallery-animation--horizontal { + display: flex; + flex-direction: column; + transform: scale(1.2); + } + + .gallery-animation--horizontal :global(.gallery-animation__column) { + --inner-height: 100vh; + height: clamp(calc(var(--inner-height) / 5), 20%, calc(var(--inner-height) / 3)); + display: flex; + flex-direction: row; + align-items: stretch; + overflow: hidden; + } + + .gallery-animation--horizontal :global(.gallery-animation__track) { + display: flex; + flex-direction: row; + align-items: stretch; + height: 100%; + column-gap: 1rem; + animation-timing-function: linear; + animation-iteration-count: infinite; + } + + .gallery-animation--horizontal :global(.gallery-animation__column:nth-child(odd) .gallery-animation__track) { + animation-name: galleryScrollRight; + animation-duration: var(--gallery-duration); + } + + .gallery-animation--horizontal :global(.gallery-animation__column:nth-child(even) .gallery-animation__track) { + animation-name: galleryScrollLeft; + animation-duration: var(--gallery-duration); + } + + .gallery-animation--horizontal :global(.gallery-animation__image) { + height: 100%; + width: auto; + flex-shrink: 0; + } + + @keyframes galleryScrollRight { + from { transform: translateX(-50%); } + to { transform: translateX(0); } + } + + @keyframes galleryScrollLeft { + from { transform: translateX(0); } + to { transform: translateX(-50%); } + } + + /* ========================================================================== + REDUCED MOTION + ========================================================================== */ + @media (prefers-reduced-motion: reduce) { :global(.gallery-animation__track) { animation: none; diff --git a/src/views/Portfolio.svelte b/src/views/Portfolio.svelte index 2d738c2..e3ecd15 100644 --- a/src/views/Portfolio.svelte +++ b/src/views/Portfolio.svelte @@ -80,7 +80,7 @@