Spaces:

awacke1
/

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

Running

App Files Files Community

awacke1 commited on Dec 8, 2024

Commit

ab7cfa8

verified ·

1 Parent(s): 025a46c

Update index.html

Browse files

Files changed (1) hide show

index.html +51 -50

index.html CHANGED Viewed

@@ -2,6 +2,7 @@
 <html>
 <head>
   <style>
     .scene-container {
       width: 100%;
       height: 800px;
@@ -19,30 +20,30 @@
     .waterfall-container {
       position: absolute;
-      left: 350px;
-      top: 50px; /* Start higher */
-      width: 200px; /* Wider waterfall */
-      height: 450px; /* Taller to reach river */
       overflow: visible;
     }
     .river-container {
       position: absolute;
-      bottom: 0; /* Extend to bottom */
-      left: -20%; /* Start before screen */
-      width: 140%; /* Extend beyond screen */
-      height: 200px; /* Taller river */
       transform: perspective(1000px) rotateX(30deg);
       transform-origin: bottom;
-      overflow: visible;
     }
     .impact-zone {
       position: absolute;
-      left: 330px;
-      bottom: 180px;
-      width: 240px; /* Wider impact */
-      height: 120px;
       overflow: visible;
     }
@@ -52,27 +53,29 @@
       opacity: 0;
     }
     .waterfall-drop {
-      animation: waterfall-fall var(--fall-duration, 2.5s) linear infinite;
     }
     .impact-splash {
-      animation: splash var(--splash-duration, 1.5s) ease-out infinite;
     }
     .river-swirl {
       animation: river-flow var(--flow-duration, 8s) linear infinite;
     }
     @keyframes waterfall-fall {
       0% {
-        transform: translate(var(--start-x, 0), -20%) scale(1);
         opacity: 0;
       }
       5% { opacity: var(--opacity, 0.6); }
       95% { opacity: var(--opacity, 0.6); }
       100% {
-        transform: translate(var(--end-x, 0), 120%) scale(var(--end-scale, 0.8));
         opacity: 0;
       }
     }
@@ -82,30 +85,28 @@
         transform: translate(var(--start-x, 0), 0) scale(0.2);
         opacity: 0;
       }
-      20% {
-        opacity: var(--opacity, 0.6);
-        transform: translate(var(--end-x, 0), var(--y-offset, 0)) scale(1);
-      }
       100% {
-        transform: translate(var(--final-x, 0), var(--final-y, 0)) scale(2);
         opacity: 0;
       }
     }
     @keyframes river-flow {
       0% {
-        transform: translate(-20%, var(--y-pos, 0)) rotate(0deg);
         opacity: 0;
       }
       5% { opacity: var(--opacity, 0.6); }
       95% { opacity: var(--opacity, 0.6); }
       100% {
-        transform: translate(120%, var(--y-pos, 0)) rotate(360deg);
         opacity: 0;
       }
     }
-    /* Climbers remain the same */
     .climber {
       position: absolute;
       width: 40px;
@@ -125,13 +126,13 @@
 </head>
 <body>
   <div class="scene-container">
-    <!-- Background cliffs -->
     <svg width="100%" height="100%" viewBox="0 0 1200 800">
       <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="#8B4513"/>
     </svg>
-    <!-- Climbers remain the same -->
     <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"/>
@@ -161,65 +162,65 @@
         function createWaterfallDrop() {
           const drop = document.createElement('div');
           drop.className = 'water-shape waterfall-drop';
-          const size = 20 + Math.random() * 60; // Larger drops
           drop.style.cssText = `
             width: ${size}px;
             height: ${size}px;
             background: var(--water-${Math.random() > 0.5 ? 'blue' : 'white'}-${Math.random() > 0.5 ? '1' : '2'});
             left: ${Math.random() * 100}%;
-            --fall-duration: ${2 + Math.random()}s;
             --opacity: ${0.4 + Math.random() * 0.3};
-            --start-x: ${-20 + Math.random() * 40}px;
-            --end-x: ${-40 + Math.random() * 80}px;
-            --end-scale: ${0.8 + Math.random() * 0.4};
-            filter: blur(${2 + Math.random() * 3}px);
           `;
           waterfall.appendChild(drop);
-          setTimeout(() => drop.remove(), 3000);
         }
         function createSplash() {
           const splash = document.createElement('div');
           splash.className = 'water-shape impact-splash';
-          const size = 30 + Math.random() * 80; // Larger splashes
           splash.style.cssText = `
             width: ${size}px;
             height: ${size}px;
             background: var(--water-${Math.random() > 0.5 ? 'blue' : 'white'}-${Math.random() > 0.5 ? '1' : '2'});
             left: ${Math.random() * 100}%;
-            --splash-duration: ${1.2 + Math.random() * 0.6}s;
             --opacity: ${0.3 + Math.random() * 0.4};
-            --y-offset: ${-20 - Math.random() * 40}px;
-            --final-y: ${-40 - Math.random() * 60}px;
-            --final-x: ${-60 + Math.random() * 120}px;
-            filter: blur(${3 + Math.random() * 3}px);
           `;
           impactZone.appendChild(splash);
-          setTimeout(() => splash.remove(), 2000);
         }
         function createRiverSwirl() {
           const swirl = document.createElement('div');
           swirl.className = 'water-shape river-swirl';
-          const size = 40 + Math.random() * 100; // Larger swirls
           swirl.style.cssText = `
             width: ${size}px;
             height: ${size}px;
             background: var(--water-${Math.random() > 0.5 ? 'blue' : 'white'}-${Math.random() > 0.5 ? '1' : '2'});
             top: ${Math.random() * 100}%;
-            --flow-duration: ${6 + Math.random() * 4}s;
             --opacity: ${0.3 + Math.random() * 0.4};
-            --y-pos: ${-40 + Math.random() * 80}px;
-            filter: blur(${2 + Math.random() * 4}px);
           `;
           river.appendChild(swirl);
-          setTimeout(() => swirl.remove(), 8000);
         }
-        // Generate more frequent water elements
-        setInterval(createWaterfallDrop, 50);  // More frequent drops
-        setInterval(createSplash, 100);        // More frequent splashes
-        setInterval(createRiverSwirl, 100);    // More frequent swirls
       }
       createWaterSystem();

 <html>
 <head>
   <style>
+    /* Base styles same as before */
     .scene-container {
       width: 100%;
       height: 800px;
     .waterfall-container {
       position: absolute;
+      left: 400px;
+      top: 200px;
+      width: 80px;
+      height: 300px;
       overflow: visible;
     }
     .river-container {
       position: absolute;
+      bottom: 100px;
+      left: 0;
+      width: 100%;
+      height: 120px;
       transform: perspective(1000px) rotateX(30deg);
       transform-origin: bottom;
+      overflow: hidden;
     }
     .impact-zone {
       position: absolute;
+      left: 380px;
+      bottom: 220px;
+      width: 160px;
+      height: 80px;
       overflow: visible;
     }
       opacity: 0;
     }
+    /* Extended animation durations */
     .waterfall-drop {
+      animation: waterfall-fall var(--fall-duration, 3s) linear infinite;
     }
     .impact-splash {
+      animation: splash var(--splash-duration, 2s) ease-out infinite;
     }
     .river-swirl {
       animation: river-flow var(--flow-duration, 8s) linear infinite;
     }
+    /* Adjusted keyframes for smoother transitions */
     @keyframes waterfall-fall {
       0% {
+        transform: translate(var(--start-x, 0), -50%) scale(1);
         opacity: 0;
       }
       5% { opacity: var(--opacity, 0.6); }
       95% { opacity: var(--opacity, 0.6); }
       100% {
+        transform: translate(var(--end-x, 0), 150%) scale(var(--end-scale, 0.8));
         opacity: 0;
       }
     }
         transform: translate(var(--start-x, 0), 0) scale(0.2);
         opacity: 0;
       }
+      20% { opacity: var(--opacity, 0.6); }
+      80% { opacity: var(--opacity, 0.6); }
       100% {
+        transform: translate(var(--final-x, 0), var(--final-y, 0)) scale(1.5);
         opacity: 0;
       }
     }
     @keyframes river-flow {
       0% {
+        transform: translate(-100%, var(--y-pos, 0)) rotate(0deg);
         opacity: 0;
       }
       5% { opacity: var(--opacity, 0.6); }
       95% { opacity: var(--opacity, 0.6); }
       100% {
+        transform: translate(200%, var(--y-pos, 0)) rotate(360deg);
         opacity: 0;
       }
     }
+    /* Rest of the styles remain the same */
     .climber {
       position: absolute;
       width: 40px;
 </head>
 <body>
   <div class="scene-container">
+    <!-- Background and climbers remain the same -->
     <svg width="100%" height="100%" viewBox="0 0 1200 800">
       <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="#8B4513"/>
     </svg>
+    <!-- Same climbers as before -->
     <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"/>
         function createWaterfallDrop() {
           const drop = document.createElement('div');
           drop.className = 'water-shape waterfall-drop';
+          const size = 10 + Math.random() * 30;
           drop.style.cssText = `
             width: ${size}px;
             height: ${size}px;
             background: var(--water-${Math.random() > 0.5 ? 'blue' : 'white'}-${Math.random() > 0.5 ? '1' : '2'});
             left: ${Math.random() * 100}%;
+            --fall-duration: ${2.5 + Math.random()}s;
             --opacity: ${0.4 + Math.random() * 0.3};
+            --start-x: ${-10 + Math.random() * 20}px;
+            --end-x: ${-20 + Math.random() * 40}px;
+            --end-scale: ${0.6 + Math.random() * 0.4};
+            filter: blur(${1 + Math.random() * 2}px);
           `;
           waterfall.appendChild(drop);
+          setTimeout(() => drop.remove(), 4000); // Extended lifetime
         }
         function createSplash() {
           const splash = document.createElement('div');
           splash.className = 'water-shape impact-splash';
+          const size = 15 + Math.random() * 40;
           splash.style.cssText = `
             width: ${size}px;
             height: ${size}px;
             background: var(--water-${Math.random() > 0.5 ? 'blue' : 'white'}-${Math.random() > 0.5 ? '1' : '2'});
             left: ${Math.random() * 100}%;
+            --splash-duration: ${1.8 + Math.random() * 0.4}s;
             --opacity: ${0.3 + Math.random() * 0.4};
+            --y-offset: ${-10 - Math.random() * 20}px;
+            --final-y: ${-20 - Math.random() * 30}px;
+            --final-x: ${-30 + Math.random() * 60}px;
+            filter: blur(${2 + Math.random() * 2}px);
           `;
           impactZone.appendChild(splash);
+          setTimeout(() => splash.remove(), 3000); // Extended lifetime
         }
         function createRiverSwirl() {
           const swirl = document.createElement('div');
           swirl.className = 'water-shape river-swirl';
+          const size = 20 + Math.random() * 50;
           swirl.style.cssText = `
             width: ${size}px;
             height: ${size}px;
             background: var(--water-${Math.random() > 0.5 ? 'blue' : 'white'}-${Math.random() > 0.5 ? '1' : '2'});
             top: ${Math.random() * 100}%;
+            --flow-duration: ${7 + Math.random() * 3}s;
             --opacity: ${0.3 + Math.random() * 0.4};
+            --y-pos: ${-20 + Math.random() * 40}px;
+            filter: blur(${1 + Math.random() * 3}px);
           `;
           river.appendChild(swirl);
+          setTimeout(() => swirl.remove(), 10000); // Extended lifetime
         }
+        // Slightly increased generation frequency
+        setInterval(createWaterfallDrop, 100);
+        setInterval(createSplash, 150);
+        setInterval(createRiverSwirl, 200);
       }
       createWaterSystem();