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

Refactor: styles GalleryAnimation migrés dans le composant

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-06 18:11:31 +01:00
parent 6151dd5a31
commit 47be2b4662
3 changed files with 62 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -59,3 +59,65 @@
</div> </div>
{/each} {/each}
</div> </div>
<style>
.gallery-animation {
width: 100%;
height: 100%;
overflow: hidden;
}
/* Vertical mode (Portfolio) */
.gallery-animation--vertical {
display: flex;
flex-direction: row;
gap: 8px;
}
.gallery-animation--vertical :global(.gallery-animation__column) {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
.gallery-animation--vertical :global(.gallery-animation__track) {
display: flex;
flex-direction: column;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
.gallery-animation--vertical :global(.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) {
animation-name: galleryScrollUp;
animation-duration: var(--gallery-duration);
}
:global(.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) {
:global(.gallery-animation__track) {
animation: none;
}
}
</style>

65
src/styles/gallery.css
View file

@ -1,65 +0,0 @@
/* 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;
}
}

1
src/styles/index.css
View file

@ -6,4 +6,3 @@
@import './buttons.css'; @import './buttons.css';
@import './cursor.css'; @import './cursor.css';
@import './utils.css'; @import './utils.css';
@import './gallery.css';