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

portfolio gallery animation : decrease opacity - related to #20

Browse source
This commit is contained in:
isUnknown 2026-03-21 12:42:32 +01:00
parent 376db9d72f
commit 436772502b
1 changed files with 13 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -31,6 +31,7 @@
class="gallery-animation gallery-animation--vertical" class="gallery-animation gallery-animation--vertical"
style="--gallery-duration: {columns[0]?.duration ?? 24}s{backgroundColor ? `; --background-color: ${backgroundColor}` : ''}{backgroundImage ? `; --background-image: url(${backgroundImage})` : ''}" style="--gallery-duration: {columns[0]?.duration ?? 24}s{backgroundColor ? `; --background-color: ${backgroundColor}` : ''}{backgroundImage ? `; --background-image: url(${backgroundImage})` : ''}"
> >
<div class="gallery-animation__overlay"></div>
{#each columns as col} {#each columns as col}
<div class="gallery-animation__column"> <div class="gallery-animation__column">
<div <div
@ -62,11 +63,13 @@
<style> <style>
.gallery-animation { .gallery-animation {
position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
background-color: var(--background-color, transparent); background-color: var(--background-color, transparent);
background-image: var(--background-image); background-image: var(--background-image);
opacity: .7;
} }
/* Vertical mode (Portfolio) */ /* Vertical mode (Portfolio) */
@ -74,6 +77,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 1rem; gap: 1rem;
transform: scale(1.2);
} }
.gallery-animation--vertical :global(.gallery-animation__column) { .gallery-animation--vertical :global(.gallery-animation__column) {
@ -92,15 +96,22 @@
} }
.gallery-animation--vertical :global(.gallery-animation__column:nth-child(odd) .gallery-animation__track) { .gallery-animation--vertical :global(.gallery-animation__column:nth-child(odd) .gallery-animation__track) {
animation-name: galleryScrollUp; animation-name: galleryScrollDown;
animation-duration: var(--gallery-duration); animation-duration: var(--gallery-duration);
} }
.gallery-animation--vertical :global(.gallery-animation__column:nth-child(even) .gallery-animation__track) { .gallery-animation--vertical :global(.gallery-animation__column:nth-child(even) .gallery-animation__track) {
animation-name: galleryScrollDown; animation-name: galleryScrollUp;
animation-duration: var(--gallery-duration); animation-duration: var(--gallery-duration);
} }
/* .gallery-animation__overlay {
position: absolute;
inset: 0;
background-color: #000;
opacity: .5;
} */
:global(.gallery-animation__image) { :global(.gallery-animation__image) {
width: 100%; width: 100%;
height: auto; height: auto;