Animierte Layer

Die Layer bewegen sich so auf mathematischen Kurven, daß sie bei der gegebenen Größe nicht kollidieren, wobei als Kollision die Überschneidung gleicher waagerechter Kanten gemeint ist. Dabei wechselt die Ebene der Layer (z-index) mit der Y-Position, so daß ein räumlicher Eindruck entsteht.

Die Layer bewegen sich zeitabhängig und nicht durch Addition eines festen Wertes.

Beim Überfahren eines Links mit der Maus wird die Animation gestoppt; sie wird fortgesetzt, wenn die Maus den Link verläßt. Ein Klick in das Dokument stoppt ebenfalls die Animation.

Derzeit sind 22 Kurven implementiert.

Kommen die Layer an ihren Ausgangspunkt zurück, wird die nächste Kurve aufgerufen. Am Ende eines solchen Zyklus streben alle Layer dem Mittelpunkt zu, am Anfang starten sie nahe beim Mittelpunkt.

Die nächste Kurve kann auch manuell durch Klick auf die Schaltfläche oder durch Reload des Dokuments aufgerufen werden. Kehrt also ein Benutzer, nachdem er einem Link gefolgt ist, wieder zu dieser Seite zurück, bewegen sich die Layer auf andere Weise. Die zufällige Auswahl einer Kurve beim ersten Aufruf der Seite ist zwar implementiert, jedoch deaktiviert.

Angepaßt unter Windows XP an           und unter Linux an      

  Bug: Bei Opera 6.01 verschwinden die Layer, wenn die Fenstergröße verändert wird, offenbar weil die CSS-Einstellungen beim Laden der Seite noch einmal ausgeführt werden. Das JavaScript wird weiter ausgeführt. Zu Beginn des nächsten Zyklus erscheinen die Layer wieder.

  Bug: Opera 6.01 kennt für das Element <img> nicht den Event-Handler onload, so daß hier der Start der Animation nicht nach dem Laden der verwendeten Grafiken erfolgt, sondern defaultmäßig nach x Sekunden.

Verwendete Grafiken

Größe des unmittelbaren Quellcodes: 10,4 KB.
Größe der 5 Grafiken: 4 KB.
Entwicklungszeit: 1 Woche.