Animation removed

gittogethers · Jan 29, 2025 · 9f50464 · 9f50464
1 parent f5c3ba1
commit 9f50464
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 62 deletions.
diff --git a/scripts.js b/scripts.js
@@ -57,29 +57,14 @@ document.addEventListener('DOMContentLoaded', () => {
             // Wait for all images to load
             const loadedImages = await Promise.all(imageLoadPromises);
 
-            // 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}`;
-
-                // Create a sequence of 6 images (3 original + 3 duplicates) for seamless loop
-                const rowImages = [];
-                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 = '';
-                    rowImages.push(newImg);
-                }
-
-                // Add original images plus duplicates for seamless loop
-                [...rowImages, ...rowImages].forEach(img => {
-                    row.appendChild(img.cloneNode(true));
-                });
-
-                mosaicContainer.appendChild(row);
-            }
+            // Create 9 image elements in a grid
+            loadedImages.forEach((img, i) => {
+                const newImg = document.createElement('img');
+                newImg.src = img.src;
+                newImg.className = 'mosaic-image';
+                newImg.alt = '';
+                mosaicContainer.appendChild(newImg);
+            });
 
             // Show the mosaic after everything is ready
             requestAnimationFrame(() => {

diff --git a/styles.css b/styles.css
@@ -27,7 +27,9 @@
 }
 
 .background-mosaic.initialized {
-    display: block;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(3, 1fr);
     opacity: 1;
 }
 
@@ -44,46 +46,9 @@
 }
 
 .mosaic-image {
-    width: 33.33%;
+    width: 100%;
     height: 100%;
     object-fit: cover;
-    flex-shrink: 0;
-}
-
-/* Update animation keyframes for seamless looping */
-@keyframes slideRight {
-    0% {
-        transform: translateX(0);
-    }
-    100% {
-        transform: translateX(-100%);
-    }
-}
-
-@keyframes slideLeft {
-    0% {
-        transform: translateX(-100%);
-    }
-    100% {
-        transform: translateX(0);
-    }
-}
-
-/* Update the mosaic row styles */
-.mosaic-row {
-    width: 100%;
-    height: 33.33vh;
-    display: flex;
-    position: relative;
-    overflow: hidden;
-}
-
-.mosaic-row-1, .mosaic-row-3 {
-    animation: slideRight 60s linear infinite;
-}
-
-.mosaic-row-2 {
-    animation: slideLeft 60s linear infinite;
 }
 
 body {