Zum Inhalt springen
IBAW Web Engineer

Einfache Animationen

Zu normalem Modus wechseln

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);
}


// Beispielaufruf
const 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 wechseln
setInterval(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.

War diese Seite hilfreich?