91 lines
2.7 KiB
HTML
91 lines
2.7 KiB
HTML
<!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>
|