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

portfolio : galerie horizontale 3 rangées + mockup conditionnel
All checks were successful
Deploy / Deploy to Production (push) Successful in 25s
Details

Browse source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-24 18:53:27 +01:00
parent 133651c35d
commit cb51e050e4
2 changed files with 42 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,7 +2,7 @@
/**
* GalleryAnimation — animation CSS de galerie défilante.
* Mode vertical : 3 colonnes (haut/bas)
* Mode horizontal : 5 rangées (gauche/droite)
* Mode horizontal : 3 rangées (gauche/droite)
* @prop {Array<{src: string, srcset: string, webp: string}>} images
* @prop {number} secondsPerImage — durée par image (défaut: 8s)
* @prop {'vertical'|'horizontal'} mode — direction du défilement
@ -16,10 +16,8 @@
const defs = mode === 'horizontal'
? [
{ offset: 0, delay: 0 },
{ offset: Math.floor(count / 5), delay: duration / 5 },
{ offset: Math.floor(2 * count / 5), delay: 2 * duration / 5 },
{ offset: Math.floor(count / 5), delay: 3 * duration / 5 },
{ offset: 0, delay: 4 * duration / 5 },
{ offset: Math.floor(count / 3), delay: duration / 3 },
{ offset: 0, delay: 2 * duration / 3 },
]
: [
{ offset: 0, delay: 0 },
@ -92,7 +90,7 @@
opacity: .5;
}
:global(.gallery-animation__image) {
.gallery-animation__image {
display: block;
object-fit: contain;
}
@ -108,14 +106,14 @@
transform: scale(1.2);
}
.gallery-animation--vertical :global(.gallery-animation__column) {
.gallery-animation--vertical .gallery-animation__column {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.gallery-animation--vertical :global(.gallery-animation__track) {
.gallery-animation--vertical .gallery-animation__track {
display: flex;
flex-direction: column;
row-gap: 1rem;
@ -123,17 +121,17 @@
animation-iteration-count: infinite;
}
.gallery-animation--vertical :global(.gallery-animation__column:nth-child(odd) .gallery-animation__track) {
.gallery-animation--vertical .gallery-animation__column:nth-child(odd) .gallery-animation__track {
animation-name: galleryScrollDown;
animation-duration: var(--gallery-duration);
}
.gallery-animation--vertical :global(.gallery-animation__column:nth-child(even) .gallery-animation__track) {
.gallery-animation--vertical .gallery-animation__column:nth-child(even) .gallery-animation__track {
animation-name: galleryScrollUp;
animation-duration: var(--gallery-duration);
}
.gallery-animation--vertical :global(.gallery-animation__image) {
.gallery-animation--vertical .gallery-animation__image {
width: 100%;
height: auto;
}
@ -149,48 +147,48 @@
}
/* ==========================================================================
MODE HORIZONTAL — 5 rangées
MODE HORIZONTAL — 3 rangées
========================================================================== */
.gallery-animation--horizontal {
display: flex;
flex-direction: column;
transform: scale(1.2);
justify-content: space-evenly;
}
.gallery-animation--horizontal :global(.gallery-animation__column) {
--inner-height: 100vh;
height: clamp(calc(var(--inner-height) / 5), 20%, calc(var(--inner-height) / 3));
.gallery-animation--horizontal .gallery-animation__column {
display: flex;
flex-direction: row;
align-items: stretch;
overflow: hidden;
}
.gallery-animation--horizontal :global(.gallery-animation__track) {
.gallery-animation--horizontal .gallery-animation__track {
display: flex;
flex-direction: row;
align-items: stretch;
height: 100%;
column-gap: 1rem;
column-gap: 1.8vh;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.gallery-animation--horizontal :global(.gallery-animation__column:nth-child(odd) .gallery-animation__track) {
.gallery-animation--horizontal .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) {
.gallery-animation--horizontal .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;
.gallery-animation--horizontal picture {
width: 56vh;
}
.gallery-animation--horizontal .gallery-animation__image {
width: 100%;
border-radius: 2vh;
overflow: hidden;
}
@keyframes galleryScrollRight {
@ -208,7 +206,7 @@
========================================================================== */
@media (prefers-reduced-motion: reduce) {
:global(.gallery-animation__track) {
.gallery-animation__track {
animation: none;
}
}