Animationen und interaktive Inhalte

IT 12.6 – Webanwendungen · Einheit 7 · Café-App Schritt 7

Lernziele

Du kannst Übergänge (transition) und Animationen (@keyframes) mit CSS gestalten.
Du kannst Animationen mit JavaScript über Klassen starten und beenden.
Du kannst Abläufe mit setTimeout und setInterval zeitlich steuern und wieder anhalten.
Du kannst interaktive Inhalte wie ein Aufklappmenü oder einen Bildwechsler entwickeln.
Du kannst beurteilen, wann Bewegung hilft und wann sie stört, und sie barrierefrei einsetzen.

Rückblick

1. Wie schaltet man eine Klasse mit JavaScript um?

element.classList.toggle('offen'), oder mit Bedingung: toggle('offen', bedingung).

2. Was bedeutet role=“status” bei der Bestätigung im Bestellformular?

Vorlesehilfen lesen eine Änderung des Inhalts automatisch vor.

3. Welche Einstellung des Geräts sollen Animationen auf Maternet immer beachten?

„Weniger Bewegung“ (prefers-reduced-motion), siehe IT 11.7, Einheit 7.

„Hat das jetzt geklappt?“

Wer auf der Speisekarte „+“ antippt, sieht oft nicht, dass etwas passiert ist: Der Warenkorb steht weiter unten. Manche tippen deshalb dreimal und haben drei Kakao im Korb. Eine kurze, unaufdringliche Rückmeldung würde helfen. Gleichzeitig nervt auf vielen Seiten ständige Bewegung.

Wie setzt man Bewegung so ein, dass sie hilft?

Erkunden: Bewegung im Browser

Bevor du weiterliest: Bearbeite die Erkundungen. Die Erklärungen weiter unten helfen dir erst danach.

Erkundung 1: Ein sanfter Übergang mittel

Fahre mit der Maus über die Karte und drücke den Knopf mehrmals.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

a) Beschreibe, was beim Darüberfahren und beim Klick passiert.

b) Ändere 0.3s in 2s. Entferne dann die ganze Zeile transition. Beschreibe jeweils die Wirkung.

c) Erkläre, welche Aufgabe CSS und welche JavaScript übernimmt.

d) Vermute, was auf einem Handy beim Darüberfahren passiert.

Lösung

Erkundung 2: Ein Countdown mittel

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

a) Drücke „Start“ und warte. Beschreibe, was nach 10 Sekunden passiert.

b) Lade neu (Ausführen) und drücke „Start“ zweimal schnell hintereinander. Beschreibe die Wirkung und vermute die Ursache.

c) setInterval liefert eine Nummer zurück, und es gibt eine Funktion clearInterval(nummer). Verbessere den Code so, dass der Countdown bei 0 stehen bleibt und ein zweiter Klick nichts kaputt macht.

Tipp 1

Zu c): Speichere die Nummer in einer Variablen außerhalb der Reaktion. Ist sie schon gesetzt, läuft bereits ein Countdown.

Lösung

Wozu Bewegung?

Vergleicht eure Ergebnisse. Bewegung ist sinnvoll, wenn sie etwas erklärt:

Rückmeldung: „Das hat geklappt“ (ein Produkt fliegt in den Warenkorb, ein Hinweis blendet ein).
Zusammenhang: Ein Menü gleitet dort heraus, wo man getippt hat.
Aufmerksamkeit für etwas wirklich Wichtiges, sparsam.

Sie stört, wenn sie ständig läuft, ablenkt, beim Lesen hindert oder Inhalte nur kurz zeigt. Für manche Menschen ist Bewegung auf dem Bildschirm sogar körperlich unangenehm (zum Beispiel Schwindel). Viele stellen deshalb am Gerät „Bewegung reduzieren“ ein.

Übergänge mit transition

Mit transition ändert sich eine CSS-Eigenschaft allmählich, wenn sich ihr Wert ändert, zum Beispiel durch :hover oder eine neue Klasse:

.knopf {
  background-color: #874026;
  transition: background-color 0.2s ease-out;
}

.knopf:hover {
  background-color: #6b3220;
}

Aufbau: Eigenschaft, Dauer, optional Verlauf (ease, linear, ease-in, ease-out) und Verzögerung. Besonders flüssig laufen transform (verschieben translateX, vergrößern scale, drehen rotate) und opacity (Deckkraft von 0 bis 1).

Animationen mit @keyframes

Eine Animation läuft durch mehrere Zwischenschritte, ohne dass sich ein Wert dauerhaft ändern muss:

@keyframes huepfen {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

.zaehler.neu {
  animation: huepfen 0.4s ease-out;
}

animation nennt Name, Dauer, Verlauf und optional, wie oft sie läuft (2, infinite).

Mit JavaScript starten: Klasse hinzufügen. Damit die Animation beim nächsten Mal wieder läuft, entfernt man die Klasse, wenn sie fertig ist:

zaehler.classList.add('neu');
zaehler.addEventListener('animationend', () => zaehler.classList.remove('neu'), { once: true });

Zeitsteuerung

Funktion	Wirkung
`setTimeout(funktion, 2000)`	ruft die Funktion einmal nach 2000 ms (2 s) auf
`setInterval(funktion, 1000)`	ruft sie immer wieder alle 1000 ms auf
`clearTimeout(nummer)`, `clearInterval(nummer)`	hält den Zeitgeber an

Beide liefern eine Nummer, mit der man den Zeitgeber später anhält. Für flüssige Bewegungen, die bei jedem Bild neu berechnet werden, gibt es requestAnimationFrame (Zusatzaufgabe).

Interaktive Bausteine

Aufklappen: Für Fragen und Antworten gibt es in HTML <details> und <summary>, ganz ohne JavaScript. Für ein Menü schaltet ein Knopf eine Klasse um und meldet den Zustand mit aria-expanded:

<button id="menue-knopf" aria-expanded="false" aria-controls="menue">Menü</button>
<ul id="menue"> … </ul>

knopf.addEventListener('click', () => {
  const offen = menue.classList.toggle('offen');   // liefert den neuen Zustand
  knopf.setAttribute('aria-expanded', offen);
});

Bildwechsler: Eine Variable merkt sich, welches Bild gerade gezeigt wird. „Weiter“ erhöht sie, nach dem letzten geht es wieder beim ersten los. Das gelingt mit dem Rest der Division: (i + 1) % anzahl.

Barrierefreie Bewegung

„Weniger Bewegung“ beachten:
```
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
```
In JavaScript: window.matchMedia('(prefers-reduced-motion: reduce)').matches ist true, wenn die Einstellung gesetzt ist.
Anhalten können: Was sich länger als 5 Sekunden von selbst bewegt (Lauftext, automatischer Bildwechsel), braucht eine Möglichkeit zum Anhalten (WCAG 2.2, Erfolgskriterium 2.2.2).
Kein Flackern: Nichts darf öfter als dreimal pro Sekunde aufblitzen (Erfolgskriterium 2.3.1). Schnelles Blinken kann bei Menschen mit Epilepsie Anfälle auslösen.
Information nie nur durch Bewegung: Die Rückmeldung „liegt im Warenkorb“ steht auch als Text da, zum Beispiel in einem Bereich mit role="status".

Café-App: Schritt 7

Café-App, Schritt 7: Rückmeldung beim Warenkorb mittel

Ergänze in speisekarte.html direkt vor dem Ende des main einen Hinweisbereich: <p id="hinweis" role="status"></p>.
Wird ein Produkt in den Warenkorb gelegt, erscheint dort für 2,5 Sekunden zum Beispiel „Kakao liegt im Warenkorb.“ Der Hinweis wird mit einem Übergang ein- und ausgeblendet (Klasse sichtbar, opacity und transform). Unten am Bildschirm fest angeheftet (position: fixed), damit man ihn auch sieht, wenn der Warenkorb nicht im Bild ist.
Wird schnell hintereinander geklickt, beginnen die 2,5 Sekunden neu.
Die Summe im Warenkorb „hüpft“ kurz, wenn sie sich ändert.
Bei „weniger Bewegung“ erscheint der Hinweis ohne Übergang und die Summe hüpft nicht.

Tipp 1

Für 3.: Speichere die Nummer von setTimeout. Vor jedem neuen setTimeout hältst du den alten mit clearTimeout an.

Tipp 2

Für 4.: Klasse neu hinzufügen. Damit die Animation bei jedem Klick neu startet, entferne die Klasse beim Ereignis animationend.

Stand nach Schritt 7

Aufgaben

Aufgabe 1: Code lesen – das Glöckchen leicht

@keyframes wackeln {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-15deg); }
  75%      { transform: rotate(15deg); }
}

.glocke.klingelt {
  animation: wackeln 0.3s ease-in-out 3;
}

const glocke = document.getElementById('glocke');

function neueNachricht() {
  glocke.classList.add('klingelt');
  setTimeout(() => glocke.classList.remove('klingelt'), 1000);
}

a) Beschreibe, was beim Aufruf von neueNachricht() zu sehen ist und wie lange es dauert.

b) Erläutere, warum die Klasse nach einer Sekunde wieder entfernt wird.

Lösung

Aufgabe 2: Der Bildwechsler mittel

Auf der Seite der Foto-AG sollen vier Bilder nacheinander gezeigt werden. Hier sind es farbige Flächen. Ergänze das JavaScript:

„Weiter“ zeigt das nächste Bild, nach dem vierten wieder das erste.
„Zurück“ zeigt das vorige, vor dem ersten das vierte.
Unter den Bildern steht Bild 2 von 4 (passend zum gezeigten Bild).
Es ist immer genau ein Bild sichtbar (die anderen haben das Attribut hidden).

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Tipp 1

zeige(i) geht alle Bilder durch und setzt bilder[k].hidden = (k !== i). Dann merkt sie sich aktuell = i und schreibt die Anzeige.

Lösung

Aufgabe 3: Die Stoppuhr mittel

Für den Sportunterricht entsteht eine Stoppuhr mit Zehntelsekunden. „Start“ startet, „Stopp“ hält an, „Zurücksetzen“ setzt auf 0.0 zurück. Ein zweiter Klick auf „Start“, während die Uhr läuft, darf sie nicht schneller machen.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Lösung

Aufgabe 4: Das Aufklappmenü mittel

Auf dem Handy soll die Navigation erst nach einem Tipp auf „Menü“ erscheinen. Ergänze das JavaScript: Ein Klick auf den Knopf schaltet die Klasse offen an der Liste um und setzt aria-expanded passend auf true oder false. Das Ein- und Ausklappen gestaltet das CSS mit einem Übergang.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Lösung

Aufgabe 5: Zu viel Bewegung? schwer

Die Seite eines Sportgeschäfts hat:

einen Lauftext mit Angeboten, der ständig von rechts nach links läuft,
ein großes Bild, das alle 3 Sekunden automatisch wechselt, ohne Möglichkeit zum Anhalten,
das Wort „SALE“, das fünfmal pro Sekunde rot aufblinkt,
Knöpfe, die beim Darüberfahren sanft die Farbe wechseln (0,2 s),
beim Hinzufügen zum Warenkorb eine kurze Animation des Warenkorb-Symbols mit dem Text „Im Warenkorb“.

Beurteile jedes Element mit Blick auf Benutzungsfreundlichkeit und Barrierefreiheit. Mache für die problematischen Elemente Verbesserungsvorschläge.

Tipp 1

Ziehe die Regeln aus dem Abschnitt „Barrierefreie Bewegung“ heran: Anhalten können, nicht flackern, nicht nur Bewegung, „weniger Bewegung“.

Lösung (Beispiel)

Zusatzaufgabe: Ein springender Ball schwer Zusatz

requestAnimationFrame(funktion) ruft eine Funktion vor dem nächsten Bild des Bildschirms auf, meist 60-mal pro Sekunde. Damit lassen sich Bewegungen Bild für Bild berechnen.

Ergänze den Code: Der Ball bewegt sich nach rechts und prallt an den Rändern der Fläche ab. „Pause“ hält ihn an, ein zweiter Klick lässt ihn weiterlaufen. Bei „weniger Bewegung“ startet er nicht von selbst.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Lösung (Beispiel)

Zusammenfassung

Bewegung soll erklären (Rückmeldung, Zusammenhang), kurz und sparsam sein.
transition: Werte ändern sich allmählich, wenn sich eine Eigenschaft ändert. Flüssig: transform und opacity.
@keyframes und animation: Ablauf mit Zwischenschritten.
JavaScript schaltet Klassen, CSS gestaltet die Bewegung.
setTimeout (einmal) und setInterval (wiederholt) liefern eine Nummer zum Anhalten mit clearTimeout/clearInterval.
Interaktive Bausteine: Aufklappen mit aria-expanded, Bildwechsler mit %.
Barrierefrei: „weniger Bewegung“ beachten, anhalten können, nicht flackern, Information auch als Text.

Selbstcheck

Geh die Fragen ehrlich durch. Wenn du bei einer unsicher bist, lies den verlinkten Abschnitt noch einmal oder bearbeite die passende Aufgabe.

Kannst du Übergänge und Animationen mit CSS gestalten? → Erkundung 1, Übergänge mit transition, Animationen mit @keyframes, Aufgabe 1
Kannst du Animationen mit JavaScript über Klassen starten? → Café-App, Aufgabe 4
Kannst du Abläufe zeitlich steuern? → Erkundung 2, Zeitsteuerung, Aufgabe 3
Kannst du interaktive Inhalte entwickeln? → Interaktive Bausteine, Aufgabe 2
Kannst du beurteilen, wann Bewegung hilft oder stört? → Wozu Bewegung?, Barrierefreie Bewegung, Aufgabe 5

Wortspeicher

Begriff	Bedeutung in einfachen Worten
Übergang (`transition`)	eine CSS-Eigenschaft ändert sich allmählich statt sofort
Animation (`@keyframes`)	Bewegung mit festgelegten Zwischenschritten
`transform`	verschieben, vergrößern oder drehen eines Elements
`opacity`	Deckkraft von 0 (unsichtbar) bis 1 (deckend)
`setTimeout` / `setInterval`	Funktion einmal nach einer Zeit / immer wieder aufrufen
`clearInterval`	wiederholten Aufruf beenden
`requestAnimationFrame`	Funktion vor dem nächsten Bild des Bildschirms aufrufen
`aria-expanded`	sagt Vorlesehilfen, ob etwas aufgeklappt ist
`prefers-reduced-motion`	Einstellung „weniger Bewegung“ des Geräts

Quellen

Hessisches Kultusministerium: Kerncurriculum Fachoberschule, Fachrichtung Technik, Schwerpunkt Informationstechnik, Themenfeld 12.6 Webanwendungen, „interaktive Inhalte und Animationen“ (Stand November 2022).
W3C: Web Content Accessibility Guidelines (WCAG) 2.2, Erfolgskriterien 2.2.2 „Pausieren, Stoppen, Ausblenden“ und 2.3.1 „Grenzwert von drei Blitzen oder weniger“. Freie Dokumentation zu CSS-Animationen: MDN Web Docs, developer.mozilla.org/de (Du verlässt jetzt Maternet).
Texte, Beispiele, Aufgaben und Code-Beispiele sind selbst erstellt.