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