Spaces:

awacke1
/

SVG-Animation-On-Top-of-the-World

Running

App Files Files Community

awacke1 commited on Dec 8, 2024

Commit

bf93483

verified ·

1 Parent(s): 253bb2c

Update index.html

Browse files

Files changed (1) hide show

index.html +121 -7

index.html CHANGED Viewed

@@ -10,7 +10,36 @@
       overflow: hidden;
     }
-    /* Simple but effective waterfall */
     .waterfall-container {
       position: absolute;
       left: 400px;
@@ -34,7 +63,28 @@
       filter: blur(2px);
     }
-    /* Basic river with animation */
     .river {
       position: absolute;
       width: 200%;
@@ -53,7 +103,6 @@
       transform-origin: bottom;
     }
-    /* Simple mist effect */
     .mist {
       position: absolute;
       width: 120px;
@@ -87,7 +136,7 @@
 </head>
 <body>
   <div class="scene-container">
-    <!-- Basic background -->
     <svg width="100%" height="100%" viewBox="0 0 1200 800">
       <defs>
         <linearGradient id="rockGradient" x1="0%" y1="0%" x2="0%" y2="100%">
@@ -97,17 +146,82 @@
         </linearGradient>
       </defs>
-      <!-- Simple cliff face -->
-      <path d="M0,200 Q300,100 600,250 T1200,200 V800 H0 Z"
             fill="url(#rockGradient)"/>
     </svg>
-    <!-- Working water effects -->
     <div class="waterfall-container">
       <div class="waterfall-stream"></div>
     </div>
     <div class="mist"></div>
     <div class="river"></div>
   </div>
 </body>
 </html>

       overflow: hidden;
     }
+    /* Climber animations */
+    .climber {
+      position: absolute;
+      width: 40px;
+      height: 60px;
+      filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
+    }
+    @keyframes bounce {
+      0%, 100% { transform: translateY(0) scaleY(1); }
+      50% { transform: translateY(-20px) scaleY(0.9); }
+    }
+    .climber1 {
+      left: 300px;
+      top: 200px;
+      animation: bounce 1.2s infinite ease-in-out;
+    }
+    .climber2 {
+      left: 500px;
+      top: 180px;
+      animation: bounce 1.5s infinite ease-in-out;
+    }
+    .climber3 {
+      left: 700px;
+      top: 220px;
+      animation: bounce 0.9s infinite ease-in-out;
+    }
+    /* Enhanced waterfall */
     .waterfall-container {
       position: absolute;
       left: 400px;
       filter: blur(2px);
     }
+    /* Whitewater spheres */
+    .whitewater-sphere {
+      position: absolute;
+      border-radius: 50%;
+      animation: float var(--float-duration, 4s) linear infinite;
+      opacity: 0.6;
+    }
+    @keyframes float {
+      0% {
+        transform: translate(-100%, var(--start-y, 0)) scale(1);
+        opacity: 0;
+      }
+      10% { opacity: var(--max-opacity, 0.6); }
+      90% { opacity: var(--max-opacity, 0.6); }
+      100% {
+        transform: translate(300%, var(--end-y, 0)) scale(var(--end-scale, 1.2));
+        opacity: 0;
+      }
+    }
+    /* River with perspective */
     .river {
       position: absolute;
       width: 200%;
       transform-origin: bottom;
     }
     .mist {
       position: absolute;
       width: 120px;
 </head>
 <body>
   <div class="scene-container">
+    <!-- Background with peaks -->
     <svg width="100%" height="100%" viewBox="0 0 1200 800">
       <defs>
         <linearGradient id="rockGradient" x1="0%" y1="0%" x2="0%" y2="100%">
         </linearGradient>
       </defs>
+      <!-- Mountains with peaks -->
+      <path d="M0,300 L200,100 L300,250 L400,80 L500,220 L600,100 L700,240 L800,120 L1000,280 L1200,150 L1200,800 L0,800 Z"
             fill="url(#rockGradient)"/>
     </svg>
+    <!-- Animated climbers -->
+    <svg class="climber climber1" viewBox="0 0 40 60">
+      <path d="M20,10 L20,35 M15,20 L25,20 M20,35 L15,50 M20,35 L25,50"
+            stroke="#333" stroke-width="3" stroke-linecap="round"/>
+      <circle cx="20" cy="8" r="6" fill="#ff4444"/>
+      <path d="M18,32 Q20,30 22,32" stroke="#888" stroke-width="2" fill="none"/>
+    </svg>
+    <svg class="climber climber2" viewBox="0 0 40 60">
+      <path d="M20,10 L20,35 M15,20 L25,20 M20,35 L15,50 M20,35 L25,50"
+            stroke="#333" stroke-width="3" stroke-linecap="round"/>
+      <circle cx="20" cy="8" r="6" fill="#4444ff"/>
+      <path d="M18,32 Q20,30 22,32" stroke="#888" stroke-width="2" fill="none"/>
+    </svg>
+    <svg class="climber climber3" viewBox="0 0 40 60">
+      <path d="M20,10 L20,35 M15,20 L25,20 M20,35 L15,50 M20,35 L25,50"
+            stroke="#333" stroke-width="3" stroke-linecap="round"/>
+      <circle cx="20" cy="8" r="6" fill="#44ff44"/>
+      <path d="M18,32 Q20,30 22,32" stroke="#888" stroke-width="2" fill="none"/>
+    </svg>
+    <!-- Water effects -->
     <div class="waterfall-container">
       <div class="waterfall-stream"></div>
     </div>
     <div class="mist"></div>
     <div class="river"></div>
+    <!-- Dynamic whitewater spheres -->
+    <script>
+      function createWhitewaterSpheres() {
+        const container = document.querySelector('.river');
+        const colors = [
+          'rgba(255, 255, 255, 0.6)',
+          'rgba(173, 216, 230, 0.5)',
+          'rgba(135, 206, 235, 0.4)',
+          'rgba(240, 248, 255, 0.7)'
+        ];
+        function createSphere() {
+          const sphere = document.createElement('div');
+          sphere.className = 'whitewater-sphere';
+          const size = 5 + Math.random() * 15;
+          sphere.style.cssText = `
+            width: ${size}px;
+            height: ${size}px;
+            background: ${colors[Math.floor(Math.random() * colors.length)]};
+            --float-duration: ${3 + Math.random() * 4}s;
+            --start-y: ${-20 + Math.random() * 40}px;
+            --end-y: ${-10 + Math.random() * 20}px;
+            --end-scale: ${0.8 + Math.random() * 0.8};
+            --max-opacity: ${0.4 + Math.random() * 0.3};
+          `;
+          container.appendChild(sphere);
+          sphere.addEventListener('animationend', () => {
+            sphere.remove();
+            createSphere();
+          });
+        }
+        // Create initial spheres
+        for (let i = 0; i < 30; i++) {
+          setTimeout(() => createSphere(), Math.random() * 3000);
+        }
+      }
+      // Initialize whitewater
+      createWhitewaterSpheres();
+    </script>
   </div>
 </body>
 </html>