Man findet sie immer häufiger auf den Internetseiten. Die animierten Kopfgrafiken. Meist werden diese mit Flash realisiert. Flash hat aber einen großen Nachteil. Es drängt sich immer in den Vordergrund.
Hat man sich eine Flash Applikation in seine Seite eingebaut bekommt man bei einer Überlagerung anderer Seitenelemente, mit CSS und z-index Probleme. Zwar kann man hier auch tricksen aber dieser Trick funktioniert meines Wissens nur unter Windows. Außerdem braucht man ein Programm mit dem man diese Flash Animation erstellen kann.
Auf der Seite von SELFHTML aktuell habe ich dann, eher durch Zufall, den Artikel Überblendungen gefunden. Darin wird beschreiben wie man mit Hilfe von JavaScript ein Überblendung (fader) von Bildern hin bekommt.
Dieser Artikel brachte mich auf die Idee so was, ich nenne sie mal KopfAnimation, in Javascript zu realisieren.
Kurzbeschreibung
Installation
Für das Einbinden von KAnima braucht man 2 Dateien und ein wenig HTML Code. Als erstes sollte man die beiden Dateien kanima.js und kanima.css, findest du im ZIP Archiv unter Download, in den Headerbereich der Seite einbauen, evtl. Pfad anpassen.
Javascript
CSS
HTML
Zum Schluss braucht man noch den HTML Teil der die einzelnen Grafiken beinhaltet. Beachten muss man, dass man die erste Grafik drei mal einbauen muss. Einmal als Grundbild, das zweite Mal für den Animationsstart und dann noch mal als letztes Bild für die Animationsschleife.
Gestartet wird das Script über den body TAG. Als Parameter sollte irgendein String übergeben werden. Dieser wird benötigt um der Schleife mitzuteilen das der erste Durchlauf beendet ist und somit die zweite Einbindung der ersten Grafik (was für ein sch… Satz) ausgelassen werden soll. Kurz gesagt, einfach was zwischen die Hochkomma reinschreiben.
Wer ein Javascript Framework (z.B JQuery) verwendet darf das Starten des Scripts über den body TAG nicht verwenden, das mag JQuery nicht. Man baut sich am besten so was in die Seite ein.
Die Variable dürfen dabei nicht, wie in der JavaScriptdatei kanima.js mit dem Kennzeichen var belegt werden da diese sonst nicht mehr als global gesehen werden.
Steuerung
Das Überblenden kann mit zwei Parameter gesteuert werden.
- standzeit
mit dieser Variabel wird eingestellt wie lange die einzelne Grafik stehe bleiben soll bevor eine neue Grafik eingeblendet wird.
- opaschritt
mit dieser Variable kann man die Transparent Schritte steuern. Der Wert gibt an um wie viel Prozent sich die Transparenz des Bildes, bei jedem Überblenddurchlauf, ändern soll.
Die Fotos für diese Beispielanimation habe ich von der Seite
pixelio.de. Die Fotografen der einzelne Bilder habe ich unter Bildquelle aufgeführt.
Download
Bilderquelle
- Peter-A_pixelio.de
- Jurec_pixelio.de
- Michael-Klapsing_pixelio.de
- Markus-Fichte_pixelio.de
- Marion_pixelio.de
- Frank-Radel_pixelio.de
- Rainer-Rosenau_pixelio.de
- Christoph-Aron–pixelmaster-x-_pixelio.de
Artikel als PDF Datei runter laden
