Grid animation fix

gittogethers · Jan 29, 2025 · 507c146 · 507c146
1 parent cdb8634
commit 507c146
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 21 deletions.
diff --git a/scripts.js b/scripts.js
@@ -43,14 +43,35 @@ document.addEventListener('DOMContentLoaded', () => {
             // Wait for all images to load
             const loadedImages = await Promise.all(imageLoadPromises);
 
-            // Create 9 image elements (3x3 grid)
-            loadedImages.forEach((img, i) => {
-                const newImg = document.createElement('img');
-                newImg.src = img.src;
-                newImg.className = 'mosaic-image';
-                newImg.alt = '';
-                mosaicContainer.appendChild(newImg);
-            });
+            // Create rows and add images
+            for (let i = 0; i < 3; i++) {
+                const row = document.createElement('div');
+                row.className = `mosaic-row mosaic-row-${i + 1}`;
+
+                // Add 3 images to each row
+                for (let j = 0; j < 3; j++) {
+                    const imgIndex = i * 3 + j;
+                    const newImg = document.createElement('img');
+                    newImg.src = loadedImages[imgIndex].src;
+                    newImg.className = 'mosaic-image';
+                    newImg.alt = '';
+
+                    // Add duplicate images for seamless animation
+                    row.appendChild(newImg.cloneNode(true));
+                }
+
+                // Add another set of the same images for seamless looping
+                for (let j = 0; j < 3; j++) {
+                    const imgIndex = i * 3 + j;
+                    const newImg = document.createElement('img');
+                    newImg.src = loadedImages[imgIndex].src;
+                    newImg.className = 'mosaic-image';
+                    newImg.alt = '';
+                    row.appendChild(newImg);
+                }
+
+                mosaicContainer.appendChild(row);
+            }
 
             // Show the mosaic after everything is ready
             requestAnimationFrame(() => {

diff --git a/styles.css b/styles.css
@@ -53,23 +53,46 @@
     object-fit: cover;
 }
 
-/* Remove individual row elements and apply animations directly to images */
-.mosaic-image:nth-child(1),
-.mosaic-image:nth-child(2),
-.mosaic-image:nth-child(3) {
-    animation: slideRight 80s linear infinite;
+/* Update the animation keyframes */
+@keyframes slideRight {
+    0% {
+        transform: translateX(-33.33%);
+    }
+    100% {
+        transform: translateX(0);
+    }
 }
 
-.mosaic-image:nth-child(4),
-.mosaic-image:nth-child(5),
-.mosaic-image:nth-child(6) {
-    animation: slideLeft 80s linear infinite;
+@keyframes slideLeft {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-33.33%);
+    }
 }
 
-.mosaic-image:nth-child(7),
-.mosaic-image:nth-child(8),
-.mosaic-image:nth-child(9) {
-    animation: slideRight 80s linear infinite;
+/* Update the mosaic row styles */
+.mosaic-row {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    position: relative;
+}
+
+.mosaic-row-1, .mosaic-row-3 {
+    animation: slideRight 20s linear infinite;
+}
+
+.mosaic-row-2 {
+    animation: slideLeft 20s linear infinite;
+}
+
+.mosaic-image {
+    width: 33.33%;  /* Each image takes up one-third of the row */
+    height: 100%;
+    object-fit: cover;
+    flex-shrink: 0;  /* Prevent images from shrinking */
 }
 
 body {