151 lines
No EOL
6.4 KiB
HTML
151 lines
No EOL
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Animierte Welle</title>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
font-family: sans-serif;
|
|
background-color: #ffffff; /* Weißer Hintergrund */
|
|
overflow: hidden; /* Verhindert Scrollbalken, falls Welle überläuft */
|
|
position: relative; /* Für absolute Positionierung des Textes */
|
|
min-height: 100vh; /* Mindesthöhe für Demo */
|
|
display: flex;
|
|
align-items: center; /* Zentriert den Inhalt vertikal */
|
|
justify-content: center; /* Zentriert den Inhalt horizontal */
|
|
}
|
|
|
|
.wave-container {
|
|
width: 100%;
|
|
position: absolute; /* Positioniert die Welle */
|
|
bottom: 0; /* Am unteren Rand */
|
|
left: 0;
|
|
line-height: 0; /* Entfernt zusätzlichen Leerraum unter dem SVG */
|
|
}
|
|
|
|
#waveSvg {
|
|
display: block; /* Entfernt zusätzlichen Leerraum */
|
|
width: 100%;
|
|
height: 250px; /* Höhe der Welle anpassen */
|
|
}
|
|
|
|
/* Optionaler Text */
|
|
.wave-text {
|
|
position: absolute;
|
|
top: 40%; /* Position anpassen */
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #555; /* Dunkelgrau */
|
|
font-size: 1.5em;
|
|
letter-spacing: 5px;
|
|
z-index: 10; /* Stellt sicher, dass der Text über der Welle liegt (falls sie höher ist) */
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wave-container">
|
|
<!-- SVG Container für die Welle -->
|
|
<svg id="waveSvg" viewBox="0 0 1440 300" preserveAspectRatio="none">
|
|
<defs>
|
|
<linearGradient id="waveGradient1" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" style="stop-color:rgba(120, 255, 150, 0.7);" /> <!-- Helles Grün -->
|
|
<stop offset="40%" style="stop-color:rgba(0, 200, 230, 0.7);" /> <!-- Türkis/Cyan -->
|
|
<stop offset="100%" style="stop-color:rgba(0, 120, 220, 0.7);" /> <!-- Helles Blau -->
|
|
</linearGradient>
|
|
<!-- Zweiter Verlauf für eine weitere Ebene (leicht variiert) -->
|
|
<linearGradient id="waveGradient2" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" style="stop-color:rgba(80, 230, 120, 0.5);" /> <!-- Etwas dunkleres Grün -->
|
|
<stop offset="50%" style="stop-color:rgba(0, 170, 210, 0.5);" />
|
|
<stop offset="100%" style="stop-color:rgba(0, 90, 190, 0.5);" /> <!-- Etwas dunkleres Blau -->
|
|
</linearGradient>
|
|
<!-- Dritter Verlauf für die feinen Linien (noch transparenter) -->
|
|
<linearGradient id="waveGradient3" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" style="stop-color:rgba(180, 255, 200, 0.3);" />
|
|
<stop offset="60%" style="stop-color:rgba(50, 200, 250, 0.3);" />
|
|
<stop offset="100%" style="stop-color:rgba(30, 130, 240, 0.3);" />
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- Pfade für die Wellenformen -->
|
|
<!-- Diese 'd' Attributes definieren die Form. Wir werden sie animieren. -->
|
|
<!-- M = MoveTo, C = Cubic Bezier Curve, S = Smooth Cubic Bezier Curve, L = LineTo, Z = ClosePath -->
|
|
<!-- Die Koordinaten basieren auf der viewBox (0 0 1440 300) -->
|
|
<path id="wavePath1" d="M0,160 C360,80 720,240 1080,160 S1440,80 1440,160 L1440,300 L0,300 Z" fill="url(#waveGradient1)" />
|
|
<path id="wavePath2" d="M0,180 C360,100 720,260 1080,180 S1440,100 1440,180 L1440,300 L0,300 Z" fill="url(#waveGradient2)" />
|
|
<path id="wavePath3" d="M0,200 C360,120 720,280 1080,200 S1440,120 1440,200 L1440,300 L0,300 Z" fill="url(#waveGradient3)" />
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Text (optional, wie im Beispielbild) -->
|
|
<div class="wave-text">
|
|
WAVE BACKGROUND
|
|
</div>
|
|
|
|
<!-- Anime.js Bibliothek einbinden -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
|
|
<!-- Unser eigenes JavaScript -->
|
|
<script>
|
|
// Warten bis das DOM vollständig geladen ist
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
// Definition der Start- und Endformen für die Animation (d-Attribute)
|
|
// Pfad 1
|
|
const path1_start = "M0,80 C150,150 350,0 500,80 S850,150 1000,50 L1000,200 L0,200 Z";
|
|
const path1_end = "M0,50 C150,0 350,150 500,80 S850,0 1000,80 L1000,200 L0,200 Z";
|
|
|
|
// Pfad 2 (leicht versetzt)
|
|
const path2_start = "M0,100 C180,180 380,30 500,100 S820,180 1000,70 L1000,200 L0,200 Z";
|
|
const path2_end = "M0,70 C180,30 380,180 500,100 S820,30 1000,100 L1000,200 L0,200 Z";
|
|
|
|
// Pfad 3 (nochmals leicht versetzt)
|
|
const path3_start = "M0,120 C200,200 400,50 500,120 S800,200 1000,90 L1000,200 L0,200 Z";
|
|
const path3_end = "M0,90 C200,50 400,200 500,120 S800,50 1000,120 L1000,200 L0,200 Z";
|
|
|
|
|
|
// Anime.js Animation für jeden Pfad
|
|
anime({
|
|
targets: '#wavePath1', // Ziel ist der Pfad mit ID wavePath1
|
|
d: [ // Animiere das 'd' Attribut
|
|
{ value: path1_start }, // Startform (optional, falls schon im HTML gesetzt)
|
|
{ value: path1_end } // Endform
|
|
],
|
|
duration: 4000, // Dauer der Animation in ms
|
|
easing: 'easeInOutSine', // Easing-Funktion für sanfte Bewegung
|
|
direction: 'alternate', // Animation läuft hin und zurück
|
|
loop: true // Animation wiederholt sich unendlich
|
|
});
|
|
|
|
anime({
|
|
targets: '#wavePath2',
|
|
d: [
|
|
{ value: path2_start },
|
|
{ value: path2_end }
|
|
],
|
|
duration: 3500, // Leicht andere Dauer für Asynchronität
|
|
delay: 150, // Kleiner Startversatz
|
|
easing: 'easeInOutSine',
|
|
direction: 'alternate',
|
|
loop: true
|
|
});
|
|
|
|
anime({
|
|
targets: '#wavePath3',
|
|
d: [
|
|
{ value: path3_start },
|
|
{ value: path3_end }
|
|
],
|
|
duration: 4500, // Nochmals andere Dauer
|
|
delay: 50, // Kleiner Startversatz
|
|
easing: 'easeInOutSine',
|
|
direction: 'alternate',
|
|
loop: true
|
|
});
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |