Test files für LifeWave mit anime.js

2025-04-10 17:26:38 +02:00 · 2025-04-10 17:26:38 +02:00 · 9c48a17152
commit 9c48a17152
parent c6dd063eee
7 changed files with 3573 additions and 0 deletions
--- a/test/anime.html
+++ b/test/anime.html
@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="de">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>Anime.js Welle</title>
+		<style type="text/css">
+			body {
+				display: flex;
+				flex-direction: column; /* Damit H1 über der Welle steht */
+				justify-content: center;
+				align-items: center;
+				min-height: 100vh;
+				background-color: #f0f0f0;
+				margin: 0;
+				font-family: sans-serif;
+			}
+
+			.wave-container {
+				display: flex; /* Elemente nebeneinander anordnen */
+				align-items: center; /* Vertikal zentrieren (Startposition) */
+				height: 100px; /* Höhe für die Wellenbewegung */
+				margin-top: 50px;
+			}
+
+			.wave-dot {
+				width: 10px; /* Breite des Punktes */
+				height: 10px; /* Höhe des Punktes */
+				margin: 0 2px; /* Kleiner Abstand zwischen Punkten */
+				background-color: #0077cc; /* Farbe der Punkte */
+				border-radius: 50%; /* Macht die Quadrate zu Kreisen (Punkten) */
+				/* Wichtig: transform-origin anpassen, falls nötig (hier nicht unbedingt) */
+				/* transform-origin: center bottom; */
+			}
+		</style>
+	</head>
+	<body>
+		<h1>Dynamische Welle mit Anime.js</h1>
+
+		<div
+			class="wave-container"><!-- Die Wellenpunkte werden per JavaScript hinzugefügt -->
+		</div>
+
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
+		<script type="text/javascript">
+			const container = document.querySelector('.wave-container');
+const numberOfDots = 50;
+// Anzahl der Punkte in der Welle
+
+// --- Schritt 1: Wellenpunkte dynamisch erstellen ---
+for (let i = 0; i < numberOfDots; i++) {
+const dot = document.createElement('div');
+dot.classList.add('wave-dot');
+container.appendChild(dot);
+}
+
+// --- Schritt 2: Anime.js Animation definieren ---
+anime({
+targets: '.wave-dot', // Wähle alle Elemente mit der Klasse 'wave-dot'
+translateY: [
+{ // Animiere die vertikale Position
+value: -30,
+duration: 600
+}, { // Bewege 30px nach oben (Dauer: 600ms)
+value: 0,
+duration: 600
+} // Bewege zurück zur Ausgangsposition (Dauer: 600ms)
+],
+easing: 'easeInOutSine', // Sorgt für sanfte Beschleunigung/Verzögerung
+loop: true, // Die Animation soll sich unendlich wiederholen
+delay: anime.stagger(30)
+// DER SCHLÜSSEL: Verzögert den Start der Animation
+// für jedes Element um 30ms gegenüber dem vorherigen.
+// Dies erzeugt den Welleneffekt!
+});
+
+/*
+// Alternative Animation (kontinuierlicher auf/ab):
+anime({
+    targets: '.wave-dot',
+    translateY: ['-25px', '25px'], // Oszilliert zwischen -25px und +25px
+    direction: 'alternate', // Kehrt die Richtung am Ende jeder Iteration um
+    loop: true,
+    duration: 800, // Dauer für eine halbe Oszillation (hoch ODER runter)
+    easing: 'easeInOutSine',
+    delay: anime.stagger(30) // Wellenverzögerung
+});
+*/
+		</script>
+	</body>
+</html>