Webdesign: Showtime

Showtime ist ein Plugin für
➜ den Viewport füllende,
➜ automatisierte
➜ wie usergesteuerte
➜ Präsentationen, Slideshows, Bildergalerien oder Endlos-Animationen.

Showtime einbinden

Um showtime.js in eine Seite einzubinden, fügen Sie den folgenden Code in den head-Bereich der Datei mit Präsentation ein.

<script src="../js/showtime.js" 
	data-initfunction="showtime"></script>

Showtime-Steuerung

<div data-showtime-control="autorun loop"></div>

Der Start/Restart Button wird in einem Element mit data-showtime-control angezeigt. Mögliche Keywords sind:
autorun (Animation wird automatisch gestartet)
loop (Animation läuft in einer endlos Schleife, anderseits bricht sie nach einem Durchlauf ab)
slow | slower | normal | faster | fast (Tempo der Animation)

Tempo

Globale Angaben
slow (*1.5) | slower (*1.25) | normal (*1) | faster (*0.8) | fast (*0.666)

Bei normalem Tempo wird
➜ 1 Sekunde pro 20 Zeichen Text und
➜ 5 Sekunden pro Bild berechnet.

Es ist auch möglich, jedem einzelnen Frame eine explizite Dauer zu geben (siehe später).

Showtime Frames definieren

Eine Showtime-Animation besteht aus Frames.
Deklarieren Sie einen Frame, indem Sie ein Element mit Attribut data-showtime-frame="DIGIT" deklarieren

<div data-showtime-frame="0">
  <h1><small>Webdesign:</small> Showtime</h1>
  <p>Showtime ist ein Plugin für automatisierte wie userge... </p>
</div>

DIGIT ist eine Integer-Zahl welche die Reihenfolge der Frames in numerischer Sortierung aufsteigend bestimmt.

Tipps Sortierung

data-showtime-frame="" hat die gleiche Bedeutung wie data-showtime-frame="0".
➜ Frames mit gleicher Integer-Zahl werden in ihrer Reihenfolge nicht verändert.

Explizite Frame-Dauer

Sie können über das Attribut data-duration bei jedem Frame eine explizite Dauer in ms angeben.

<div data-showtime-frame="4" data-duration="5000">
...
</div>

Diese Angaben werden immer noch durch die globalen Angaben slow ... fast beinflusst.

Tipps Frames anmelden

➜ Achten Sie darauf, dass der Frameinhalt auch auf einen Kleinbildschirm passt.
➜ Nutzen Sie das hidden-Attribut, um Frames nur in der Präsentation anzuzeigen.

Präsentation gestalten

Sie können die Präsentation gestalten.
Schreiben Sie die Styleregeln einfach in ein style-Element der Seite,
für welche Sie eine Präsentation erstellen.

Vorlage

<style></style>

Beispiel Framenummerierung ausblenden

<style>
[id="showtime"] [data-showtime-frame]::after { display:none; }
</style>

Beispiel: CSS-Animation kontrolliert starten.

Die Klasse active definiert den aktiven Frame.

<style>
.active #ex12 .ani{
	animation:scroll12 8s ease 4;
}
</style>

Tipps für Styles

➜ Beschränken Sie sich auf color, background, border oder Texteffekte.
➜ Styles für die Dimensionierung sind Profis vorbehalten ;)

Effekte

Derzeit wird nur ein einfacher Opacity-Fade-Effekt angewendet.
Sie können aber problemlos Ihren eigenen Effekt per CSS definieren.

Vorläufiges ENDE

Danke für Ihre Aufmerksamkeit.
Das Showtime Script finden Sie anschliessend im Anhang.
Für Interessierte geht's noch etwas weiter.

keep it simple stupid

Sinnvoller Einsatz

Überlegen Sie sich gut, wo und wann Sie Showtime einsetzen wollen oder können.
Hier folgen ein paar Vorschläge.

Permanente Diashow an Party

Sie wollen an einer Party Bilder zeigen, ohne aber die Aufmerksamkeit zu erzwingen.
Verwenden Sie autorun und loop und lassen Sie Ihre Gäste einfach gelegentlich einen Blick hineinwerfen.

Permanente Diashow in einem Schaufenster

Sie können in Ihrem Schaufenster 24/7 eine Animation präsentieren.
Verwenden Sie autorun und loop und lassen Sie die Diashow einfach nebenher laufen.

Ihr öffentlicher Vortrag

Benutzen Sie Showtime als Slideshow, um Ihren manuell gesteuerten Vortrag mit Bildern und Stichworten auszustatten.
Es gilt hier autorun und loop.

Ihre Website anreichern

Sie können eine optionale Slideshow oder Gallery präsentieren.
Es gilt hier autorun aber loop.

Caveats

➜ Sie können pro Webseite nur eine Slideshow einbinden.
➜ Es ist derzeit nicht möglich, die Slideshow mit Audio-Inhalt zu synchronisieren.
➜ Aber....

Leistungsfähigkeit

... ihre Frames können praktisch beliebigen Inhalt aufnehmen, sogar Animationen in einem Frame.

Dieser Absatz soll das gleiche Seitenverhältnis wie der Viewport aufweisen.
Dazu soll auch die Schriftgrösse sich so skalieren, dass der Inhalt immer in den Bereich passt.

Content 1

Content 2

Content 3

Content 4

Content 5

ENDE

Danke für Ihre Aufmerksamkeit.

keep it simple stupid

Anhang: Das Script

Die aktuell ausgeführte Javascript-Datei showtime.js.