Spaces:

awacke1
/

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

Running

App Files Files Community

awacke1 commited on Dec 8, 2024

Commit

025a46c

verified ·

1 Parent(s): 56aece3

Create index.html

Browse files

Files changed (1) hide show

index.html +229 -0

index.html ADDED Viewed

	@@ -0,0 +1,229 @@

+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    .scene-container {
+      width: 100%;
+      height: 800px;
+      background: linear-gradient(#1B4B8A, #3A6FB0 40%, #87CEEB 70%);
+      position: relative;
+      overflow: hidden;
+    }
+    :root {
+      --water-blue-1: rgba(173, 216, 230, 0.7);
+      --water-blue-2: rgba(135, 206, 235, 0.6);
+      --water-white-1: rgba(255, 255, 255, 0.5);
+      --water-white-2: rgba(240, 248, 255, 0.4);
+    }
+    .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;
+    }
+    .water-shape {
+      position: absolute;
+      border-radius: 50%;
+      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;
+      }
+    }
+    @keyframes splash {
+      0% {
+        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;
+      height: 60px;
+      animation: bounce 1.2s infinite ease-in-out;
+    }
+    @keyframes bounce {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-20px); }
+    }
+    .climber1 { left: 300px; top: 200px; animation-delay: -0.2s; }
+    .climber2 { left: 500px; top: 180px; animation-delay: -0.5s; }
+    .climber3 { left: 700px; top: 220px; animation-delay: -0.8s; }
+  </style>
+</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"/>
+      <circle cx="20" cy="8" r="6" fill="#ff4444"/>
+    </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"/>
+    </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"/>
+    </svg>
+    <div class="waterfall-container"></div>
+    <div class="impact-zone"></div>
+    <div class="river-container"></div>
+    <script>
+      function createWaterSystem() {
+        const waterfall = document.querySelector('.waterfall-container');
+        const impactZone = document.querySelector('.impact-zone');
+        const river = document.querySelector('.river-container');
+        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();
+    </script>
+  </div>
+</body>
+</html>