Einfache Animationen
Animationen machen Webseiten lebendiger und verbessern das Benutzererlebnis. Mit JavaScript können wir einfache Animationen erstellen, die auf Benutzerinteraktionen reagieren oder automatisch ablaufen.
CSS-Klassen für Animationen
Abschnitt betitelt „CSS-Klassen für Animationen“Die einfachste Methode ist, CSS-Transitionen zu definieren und diese durch Hinzufügen oder Entfernen von Klassen zu aktivieren:
<style> .box { width: 100px; height: 100px; background-color: blue; transition: all 0.5s ease; }
.expanded { width: 200px; height: 200px; background-color: red; }</style>
<div class="box" id="animationBox"></div>
<script> const box = document.querySelector("#animationBox");
box.addEventListener("click", function() { // Klasse hinzufügen oder entfernen, um Animation auszulösen box.classList.toggle("expanded"); });</script>Diese Methode ist leistungsstark und einfach zu implementieren.
CSS-Eigenschaften ändern
Abschnitt betitelt „CSS-Eigenschaften ändern“Wir können auch direkt CSS-Eigenschaften mit JavaScript ändern:
const box = document.querySelector("#animationBox");
box.addEventListener("click", function() { if (box.style.width === "200px") { box.style.width = "100px"; box.style.height = "100px"; box.style.backgroundColor = "blue"; } else { box.style.width = "200px"; box.style.height = "200px"; box.style.backgroundColor = "red"; }});Zeitgesteuerte Animationen
Abschnitt betitelt „Zeitgesteuerte Animationen“Mit setTimeout() können wir Aktionen verzögern, und mit setInterval() können wir Aktionen in regelmässigen Abständen ausführen:
const box = document.querySelector("#animationBox");let position = 0;let timer;
function startAnimation() { // Animation starten timer = setInterval(function() { position += 5; box.style.marginLeft = position + "px";
// Animation stoppen, wenn Position > 300px if (position > 300) { clearInterval(timer); } }, 50); // Alle 50 Millisekunden ausführen}
box.addEventListener("click", startAnimation);Eine einfache Fadeout-Animation
Abschnitt betitelt „Eine einfache Fadeout-Animation“Hier ist ein Beispiel für eine Ausblend-Animation:
function fadeOut(element, duration) { // Anfangsopazität setzen element.style.opacity = 1;
// Zeitintervall berechnen const interval = 50; const steps = duration / interval; const step_opacity = 1 / steps;
// Animation starten const timer = setInterval(function() { // Opazität verringern let opacity = parseFloat(element.style.opacity); opacity -= step_opacity;
element.style.opacity = opacity;
// Animation beenden, wenn Opazität <= 0 if (opacity <= 0) { element.style.opacity = 0; clearInterval(timer); } }, interval);}
// Beispielaufrufconst message = document.querySelector("#message");document.querySelector("#closeBtn").addEventListener("click", function() { fadeOut(message, 1000); // 1 Sekunde zum Ausblenden});Einfache Bildwechsel-Animation
Abschnitt betitelt „Einfache Bildwechsel-Animation“Eine einfache Diashow kann so implementiert werden:
const bilder = [ "bild1.jpg", "bild2.jpg", "bild3.jpg", "bild4.jpg"];
let aktuellesBild = 0;const bildElement = document.querySelector("#slideshowBild");
function nächstesBild() { aktuellesBild = (aktuellesBild + 1) % bilder.length; bildElement.style.opacity = 0; // Ausblenden
setTimeout(function() { bildElement.src = bilder[aktuellesBild]; bildElement.style.opacity = 1; // Einblenden }, 500);}
// Alle 3 Sekunden Bild wechselnsetInterval(nächstesBild, 3000);Animationen mit CSS-Transitionen kombinieren
Abschnitt betitelt „Animationen mit CSS-Transitionen kombinieren“Für schöne Effekte können wir CSS-Transitionen mit JavaScript kombinieren:
<style> .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); background-color: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease-out; }
.modal.show { transform: translate(-50%, -50%) scale(1); }</style>
<script> const öffnenButton = document.querySelector("#openModal"); const schliessenButton = document.querySelector("#closeModal"); const modal = document.querySelector("#modal");
function modalÖffnen() { modal.classList.add("show"); }
function modalSchliessen() { modal.classList.remove("show"); }
öffnenButton.addEventListener("click", modalÖffnen); schliessenButton.addEventListener("click", modalSchliessen);</script>Übung: Animierte Bildergalerie
Abschnitt betitelt „Übung: Animierte Bildergalerie“Zusammenfassung
Abschnitt betitelt „Zusammenfassung“- Animationen verbessern das Benutzererlebnis auf Webseiten
- Die einfachste Methode ist das Hinzufügen/Entfernen von CSS-Klassen mit Transitionen
- Mit
setTimeout()können wir Aktionen verzögern - Mit
setInterval()können wir Aktionen wiederholt ausführen - Für Überblendeffekte können wir die CSS-Eigenschaft
opacityändern - Die Kombination von CSS-Transitionen und JavaScript bietet die besten Ergebnisse bei einfachen Animationen
Im nächsten Kapitel lernen wir, wie wir Daten im Browser speichern können.