JavaScript/Tutorials/Web Animations
- Animieren in JavaScript
- Ladebalken
- Ball
- Bilderkarussell
- Animationen steuern
- Pausieren bei mouseover
- Steuerung mit Tastatur und Maus
- Animations-Events
- Animationen synchronisieren
- Bildwechsler mit Überblendungen
- Keyframes takten
- Fazit
- Komfort-Bildwechsler
- Bildwechsler dynamisch einfügen
- Zufallsauswahl
- Extras
- Nachladen von CSS-Dateien
Inhaltsverzeichnis
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.
