diff --git a/site/blueprints/pages/project.yml b/site/blueprints/pages/project.yml index b359c2a..64bf455 100644 --- a/site/blueprints/pages/project.yml +++ b/site/blueprints/pages/project.yml @@ -99,10 +99,6 @@ columns: uploads: template: image help: Petite image carrée représentant le jeu - galleryBackgroundColor: - label: Couleur d'arrière-plan de la galerie animée - type: color - alpha: false keywords: label: Mots clés type: structure diff --git a/site/templates/portfolio.json.php b/site/templates/portfolio.json.php index 04e2213..22bb3c4 100644 --- a/site/templates/portfolio.json.php +++ b/site/templates/portfolio.json.php @@ -13,8 +13,7 @@ $specificData = [ 'srcset' => $f->srcset('gallery'), 'webp' => $f->srcset('gallery-webp'), ])->values(), - 'mockup' => $project->mockup()->toFile()?->url(), - 'gallery_background_color' => $project->galleryBackgroundColor()->value(), + 'mockup' => $project->mockup()->toFile()?->url(), 'keywords' => $project->keywords()->toStructure()->map(fn($i) => [ 'label' => $i->label()->value(), 'text' => $i->text()->value(), diff --git a/src/components/ui/GalleryAnimation.svelte b/src/components/ui/GalleryAnimation.svelte index d3a5aa2..de6faa1 100644 --- a/src/components/ui/GalleryAnimation.svelte +++ b/src/components/ui/GalleryAnimation.svelte @@ -4,7 +4,7 @@ * @prop {Array<{src: string, srcset: string, webp: string}>} images * @prop {number} secondsPerImage — durée par image (défaut: 8s) */ - let { images = [], secondsPerImage = 8, backgroundColor = null } = $props() + let { images = [], secondsPerImage = 8 } = $props() const columns = $derived.by(() => { const count = images.length @@ -29,7 +29,7 @@ - - diff --git a/src/styles/gallery.css b/src/styles/gallery.css new file mode 100644 index 0000000..cef463b --- /dev/null +++ b/src/styles/gallery.css @@ -0,0 +1,65 @@ +/* Gallery animation */ +:root { + --gallery-gap: 8px; + --gallery-duration: 24s; +} + +.gallery-animation { + width: 100%; + height: 100%; + overflow: hidden; +} + +/* Vertical mode (Portfolio) */ +.gallery-animation--vertical { + display: flex; + flex-direction: row; + gap: var(--gallery-gap); +} + +.gallery-animation--vertical .gallery-animation__column { + flex: 1; + display: flex; + flex-direction: column; + overflow: hidden; +} + +.gallery-animation--vertical .gallery-animation__track { + display: flex; + flex-direction: column; + animation-timing-function: linear; + animation-iteration-count: infinite; +} + +.gallery-animation--vertical .gallery-animation__column:nth-child(odd) .gallery-animation__track { + animation-name: galleryScrollDown; + animation-duration: var(--gallery-duration); +} + +.gallery-animation--vertical .gallery-animation__column:nth-child(even) .gallery-animation__track { + animation-name: galleryScrollUp; + animation-duration: var(--gallery-duration); +} + +.gallery-animation__image { + width: 100%; + height: auto; + display: block; + object-fit: contain; +} + +@keyframes galleryScrollDown { + from { transform: translateY(0); } + to { transform: translateY(-50%); } +} + +@keyframes galleryScrollUp { + from { transform: translateY(-50%); } + to { transform: translateY(0); } +} + +@media (prefers-reduced-motion: reduce) { + .gallery-animation__track { + animation: none; + } +} diff --git a/src/styles/index.css b/src/styles/index.css index d437c36..c02597e 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -6,3 +6,4 @@ @import './buttons.css'; @import './cursor.css'; @import './utils.css'; +@import './gallery.css'; diff --git a/src/views/Portfolio.svelte b/src/views/Portfolio.svelte index 4cfaeba..7308abb 100644 --- a/src/views/Portfolio.svelte +++ b/src/views/Portfolio.svelte @@ -94,7 +94,7 @@ {#if currentProject}