JavaScript/Tutorials/Web Animations

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Animation Icon.svg
In diesem Tutorial lernen Sie, wie Sie einen Bildwechsler mit JavaScript animieren und mit einer komfortablen Steuerung versehen können. Dabei wird die moderne Web Animations API verwendet, mit der Sie CSS-Animationen durch JavaScript steuern können.


  1. Animieren in JavaScript
    • Ladebalken
    • Ball
    • Bilderkarussell
  2. Animationen steuern
    • Pausieren bei mouseover
    • Steuerung mit Tastatur und Maus
    • Animations-Events
  3. Animationen synchronisieren
    • Bildwechsler mit Überblendungen
    • Keyframes takten
    • Fazit
  4. Komfort-Bildwechsler
    • Bildwechsler dynamisch einfügen
    • Zufallsauswahl
  5. Extras
    • Nachladen von CSS-Dateien


Vorüberlegungen

Voraussetzungen

Dieses Tutorial richtet sich vor allem an Anfänger, die bereits erste Erfahrungen mit JavaScript-Elementen wie Schleifen oder Verzweigungen haben und nun tiefer in eine objektorientierte Programmierung in JavaScript einsteigen möchten.

Daher werden in diesem Artikel grundlegende Kenntnisse um die Sprachelemente von JavaScript sowie HTML und CSS vorausgesetzt und nicht näher besprochen. Es seien an dieser Stelle aber folgende Kapitel der Dokumentation zum Nachschlagen empfohlen:

Geschichte

Dieser Artikel ist die umfassende Neubearbeitung eines Selfhtml-aktuell-Artikels von Felix Riesterer aus dem Jahre 2008 mit dem Thema Fader-Framework - Kleiner Lehrgang zum vernünftigen Schreiben eines JavaScripts.

Die seinerzeit neue CSS3-Eigenschaft opacity bedarf heute weder einer weiteren Erklärung noch eines Fallbacks mit der proprietären MS-filter-Eigenschaft.

Damals wurden JavaScript-Funktionen mit Event-Attributen im HTML-Code aufgerufen. Die im Originalartikel vorgestellte Kapselung von Funktionen mittels window.onload ist heute durch addEventlistener nicht mehr nötig. Die dort ausführlich erklärte Trennung von Inhalt, Präsentation und Verhalten mit der Auslagerung von externen JavaScripten ist heute ein Standard, dessen Nutzen den meisten Webdesignern nicht mehr vorgestellt werden muss. Darüber hinaus hat sich gerade im Bereich der Animation und der Ereignisüberwachung viel verändert.

Zielvorstellungen

Ziel dieses Artikels ist ein JavaScript, das aus einer externen Datei in ein Dokument eingebunden werden kann, sich dort selbst initialisiert und vorhandene Bilder in eine Art Bilder-Slideshow umwandeln kann. Dabei soll dieser Bildwechsler sowohl mit Maus als auch Tastatur steuerbar sein.