Spaces:

awacke1
/

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

Running

App Files Files Community

SVG-Animation-On-Top-of-the-World / index.html

awacke1

Create index.html

025a46c verified 7 months ago

raw

history blame

7.62 kB

	<!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>