Test files für LifeWave mit anime.js
This commit is contained in:
Kevin Adametz
parent
c6dd063eee
commit
9c48a17152
7 changed files with 3573 additions and 0 deletions
151
test/anime-wave.html
Normal file
151
test/anime-wave.html
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
<!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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue