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

feat(portfolio): image d'arrière-plan pour la galerie animée
All checks were successful
Deploy / Deploy to Production (push) Successful in 18s
Details

Browse source 
related to #20

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-21 12:34:18 +01:00
parent b455cbb82e
commit 8829817e48
4 changed files with 15 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/ui/GalleryAnimation.svelte
View file

@ -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, backgroundColor = null, backgroundImage = null } = $props()
const columns = $derived.by(() => {
const count = images.length
@ -29,7 +29,7 @@
<div
class="gallery-animation gallery-animation--vertical"
style="--gallery-duration: {columns[0]?.duration ?? 24}s{backgroundColor ? `; --background-color: ${backgroundColor}` : ''}"
style="--gallery-duration: {columns[0]?.duration ?? 24}s{backgroundColor ? `; --background-color: ${backgroundColor}` : ''}{backgroundImage ? `; --background-image: url(${backgroundImage})` : ''}"
>
{#each columns as col}
<div class="gallery-animation__column">
@ -66,6 +66,7 @@
height: 100%;
overflow: hidden;
background-color: var(--background-color, transparent);
background-image: var(--background-image);
}
/* Vertical mode (Portfolio) */

4
src/views/Portfolio.svelte
View file

@ -80,7 +80,7 @@
</script>
<div class="portfolio-gallery mobile-only" aria-hidden="true">
<GalleryAnimation images={currentProject.imagesGallery} backgroundColor={currentProject.galleryBackgroundColor} />
<GalleryAnimation images={currentProject.imagesGallery} backgroundColor={currentProject.galleryBackgroundColor} backgroundImage={currentProject.galleryBackgroundImage} />
</div>
<section
@ -99,7 +99,7 @@
{#if currentProject}
<!-- Galerie animation (gauche desktop / plein écran mobile) -->
<div class="portfolio-gallery desktop-only" aria-hidden="true">
<GalleryAnimation images={currentProject.imagesGallery} backgroundColor={currentProject.galleryBackgroundColor} />
<GalleryAnimation images={currentProject.imagesGallery} backgroundColor={currentProject.galleryBackgroundColor} backgroundImage={currentProject.galleryBackgroundImage} />
</div>
<!-- Mockup device (centre) -->