Showtime!

Mit der Extension „ishow“ lässt sich in Datenstrom Yellow mit minimalem Aufwand eine flotte Bildershow mit Seitenverknüpfungen erstellen.

Den Ursprung hat diese Extension auf meiner Homepage „NoSi.de“, für die ich ein bisschen Bewegung, jedoch ohne aufwändige Bibliotheken realisieren wollte. Herausgekommen ist eine CSS-Animation. Die Idee, das mit einigen Paramtern als Extension zu generieren, war schnell realisiert. Sie dümpelte jedoch vor sich hin, denn ich fand keine Lösung, wie ich Verknüpfungen der Bilder zu Seiten ohne JavaScript realisiere.

Das scheiterte daran, dass statische Links bei CSS-Animationen eine gewissen Eigendynamik haben. Den Ergeiz „kein JavaScript“ habe ich aufgegeben, den für „keine Bibliotheken“ jedoch behalten. Mit einem onClick=location.haref=… pro Bild kann ich (mittlerweile) leben, wohl wissend, dass es dann bei abgeschaltetem JavaScript auch keine Referenzierung gibt. Das ist dann eben so.

Nachdem das gelöst war, habe ich noch ein wenig an der Strategie für die Animationen gefeilt. Denn ursprünglich gab es gerade mal zwei und der Code dafür war recht aufwändig. Ich habe mir ein paar „Presenter“ angesehen und so die Grundregeln verstanden:

  1. Für jedes Bild wird ein und die selbe Animation verwendet.
  2. Die Animationsdauer pro Bild ergibt die Gesamtdauer der Animation
  3. Die Animationen werden mit Verzögerung auf die Bilder angewandt, woraus eine Präsentation entsteht.
  4. Den größten Teil der Zeit befindet sich jedes Bild „im Ruhezustand“, es muss dafür „ordentlich weggeräumt“ werden.

Den zeitlichen Verlauf zeigt die Grafik. Es gibt eine Einblend-, Anzeige- und Ausblendphase(A), für den Rest der Show ist „Sendepause“ (B). Dieses Muster wird um die Länge der Animation verschoben, fertig ist die Präsentation (C). Die Animation entsteht durch die Verschiebung der Bewegungen zueinander, die „hinten übrig bleibenden“ Ruhephasen verschieben die Präsentation nach dem Start entsprechend vom Anfang („Übertrag“ ist grün).

Auf dieser Grundlage ist die grundlegend überarbeitete Extension ishow entstanden.

Damit es fluffig aussieht, werden bei „ishow“ die nachfolgenden Bilder so verzögert, dass deren Einblendung mit der Ausblendung des Vorgängers zusammenfällt.

Für eine animierte Schautafel steht nach der Installation der Extension ein simpler Befehl bereit:

[ishow verzeichnis/.*svg - - - - x]

Damit wird eine seitenbreite Anzeige aller SVG-Dateien aus dem „Verzeichnis“ eingerichtet, die einen Rahmen hat. Konzeptbedingt kann pro Seite nur eine Show laufen. Mit den nachfolgenden Schaltern können die aktuell verfügbaren Varianten ausprobiert werden:

               

 

Für die Höhe der Präsentation ist das erste Bild maßgeblich. Ausgehend von dessen Größe werden alle weiteren Bilder zentriert im verfügbaren Platz angezeigt.

Die „Umschalterei“ hier auf der Seite wird mit ein bisschen JavaScript und einem Kunstgriff realisiert: Die Extension erzeugt nur die für die eingestellte Präsentation erforderlichen Format- und Animationsbefehle, ausschließlich auf der Seite der Animation. Was zweckmäßig ist, denn nur auf der jeweiligen Seite sind die gernerierten Formatanweisungen sinnvoll einsetzbar, wozu also „global“ laden. Damit die verschiedenen Möglichkeiten angezeigt werden können, sind hier auf der Seite die Bewegungsprofile für jeden „Show-Typ“ berechnet und hinterlegt. So können sie per Klick auf einen der Knöpfe den Elementen der Extension dynamisch zugewiesen werden.

Mit dem hier skizzierten Basis-Wissen können ggf. leicht weitere „Showeffekte“ mittels @keyframe-CSS realisiert werden. Ich füge die – wenn sie mir zugeschickt werden – gern der Extension hinzu, damit die so erstellte Erweiterung „updatesicher“ ist.