Werkstatt

Elementkatalog

Bausteine für diese Seite, abgeleitet aus Otto Wagners Stadtbahn, der Schemerlbrücke am Nussdorfer Wehr, weiteren Wagner-Bauten und dem Haus der Wiener Secession. Jedes Element ist eine eigene Komponente und kann auf jeder Seite verwendet werden.

Alle Bewegungen hängen am Scrollen: Hältst du an, steht alles still; scrollst du zurück, läuft alles rückwärts. Mit „Bewegung reduzieren“ im Betriebssystem zeigt jedes Element sofort seinen fertigen Zustand.

Jedes Element gibt es auch ohne Bewegung: Die Klasse still an einem Element (oder an einem umgebenden Block) zeigt es fertig und ruhig. Durchfahrt und horizontaler Abschnitt haben dafür die Eigenschaft still, Bilder motion={false}.

A · Stadtbahnbögen

Die Gürtellinie der Stadtbahn läuft über Viadukte, deren Bögen an die alten Stadttore erinnern. Jede Öffnung ist gleich gegliedert: Pfeiler, Kämpfer, Rundbogen, Schlussstein und darüber ein durchlaufendes Gesims.

A 1

Bogenreihe

Vorbild
Stadtbahnviadukt am Gürtel
Einsatz
Band zwischen zwei Abschnitten, Abschluss einer Seite, Sockel unter einem Bild.
Bewegung
Die Mauer füllt sich, das Gesims zeichnet sich, die Bögen schließen sich Joch für Joch von den Kämpfern zum Scheitel, dann setzen sich die goldenen Schlusssteine. Mit drift gleitet das Band langsam nach links, wie aus dem fahrenden Zug gesehen.
Komponente
ornament/ArcadeRow

Mit drift

A 2

Lünette

Vorbild
Rundbogenfenster der Stationen und Viadukte
Einsatz
Schmuck über einem Titel, Auftakt eines Textes, kleines Emblem.
Bewegung
Die Basis öffnet sich aus der Mitte, die goldene Sonne geht auf, die Sprossen strahlen von der Mittelsprosse aus, Ring und Bogen schließen sich, der Schlussstein setzt sich.
Komponente
ornament/Lunette

A 3

Bogenfeld

Vorbild
Bogenöffnungen der Viadukte, Fenster der Stationen
Einsatz
Karten für kurze Einträge, Übersichten, Listen von Orten oder Daten. Inhalt frei über den Slot.
Bewegung
Die Pfosten wachsen aus der Schwelle, der Bogen schließt sich von beiden Kämpfern, der Schlussstein setzt sich, im Bogenfeld strahlen Sprossen auf.
Komponente
ornament/ArchCard

Erstes Feld

Platzhaltertext. Hier steht später ein kurzer Inhalt, damit man sieht, wie sich Text in diesem Element verhält.

Zweites Feld

Platzhaltertext. Hier steht später ein kurzer Inhalt, damit man sieht, wie sich Text in diesem Element verhält.

Ohne Sprossen

Platzhaltertext. Hier steht später ein kurzer Inhalt, damit man sieht, wie sich Text in diesem Element verhält.

A 4

Schlussstein-Überschrift

Vorbild
Scheitel eines Viaduktbogens
Einsatz
Überschriften von Abschnitten, Seitentitel. Die Überschrift selbst bewegt sich nie.
Bewegung
Die Kämpfer zeichnen sich nach außen, der flache Bogen schließt sich von beiden Enden, der Schlussstein setzt sich.
Komponente
ornament/KeystoneHeading

Kapitel

Eine ruhige Überschrift

A 5

Durchfahrt

Vorbild
Fahrt durch einen Bogen der Gürtellinie
Einsatz
Kapitelwechsel auf langen Seiten, Übergang zu einem neuen Bereich. Sparsam einsetzen: höchstens einmal pro Seite.
Bewegung
Der Abschnitt hält für eine Bildschirmhöhe an. Die apfelgrüne Viaduktwand wächst um den mittleren Bogen, bis die Öffnung den Bildschirm füllt, dann verschwindet die Wand und der Inhalt dahinter steht da. Mit dem Platz after (hier eine Linksammlung) erscheint nach der Fahrt darunter noch ein Block, Teil für Teil.
Komponente
ornament/ArchPassage

B · Stadtbahnstationen

Die Stationen sind apfelgrün und weiß gestrichen. Am Karlsplatz setzte Wagner Marmorplatten in ein Eisengerüst und schmückte den geschwungenen Eingangsbogen mit goldenen Sonnenblumen. Die Geländer der Linie tragen Sonnenblumen oder Lorbeerkränze.

B 1

Sonnenblume

Vorbild
Vergoldete Sonnenblumen der Pavillons am Karlsplatz
Einsatz
Emblem, Aufzählungszeichen, Schmuck neben Datum oder Titel. Größe frei über size.
Bewegung
Die Blüte dreht sich in ihre Lage, die Scheibe erscheint, erst öffnen sich die inneren, dann die äußeren Blätter, zuletzt die Samen.
Komponente
ornament/Sunflower

B 2

Geländer

Vorbild
Stadtbahngeländer mit Sonnenblumen- und Lorbeerkranzmotiv
Einsatz
Abschluss unter einer Überschrift, Trenner zwischen Abschnitten, Fuß einer Seite.
Bewegung
Die Handläufe zeichnen sich von links, die Stäbe wachsen Feld für Feld aus dem unteren Lauf, dann öffnen sich die Medaillons.
Komponente
ornament/Railing

Variante Lorbeer

B 3

Stationsschild

Vorbild
Namenstafeln der Stadtbahnstationen
Einsatz
Seitentitel, Kapitelnamen, Orte. Diese Gruppentitel sind selbst Stationsschilder.
Bewegung
Die grüne Tafel öffnet sich aus der Mitte, der goldene Innenrahmen zeichnet sich, die Eckquadrate erscheinen.
Komponente
ornament/StationSign

Karlsplatz

Hietzing

B 4

Pavillon

Vorbild
Stadtbahnpavillon Karlsplatz
Einsatz
Rahmen um einen wichtigen Inhalt: Begrüßung, Ankündigung, ein Bild mit Text.
Bewegung
Die Pfeiler mit den Marmorplatten wachsen aus dem Sockel. Im Bogenfeld schließen sich die Bögen von beiden Seiten, die goldenen Punkte erscheinen von außen zur Mitte, die Sprossen strahlen auf und die halbe Sonnenblume öffnet sich. Krone und Pfeiler laufen getrennt, damit langer Inhalt die Krone nicht verzögert.
Komponente
ornament/PavilionFrame

Willkommen am Karlsplatz

Platzhaltertext. Hier steht später ein kurzer Inhalt, damit man sieht, wie sich Text in diesem Element verhält.

Der Rahmen passt sich jeder Inhaltshöhe an; die Krone behält ihre Form.

B 5

Lorbeerkranz

Vorbild
Lorbeerkränze mit Bändern an Geländern und Stationsfronten
Einsatz
Jahreszahl, Jubiläum, Name oder Zahl in der Mitte; Abschluss eines Kapitels. Ton gold oder grün.
Bewegung
Beide Zweige wachsen von der Schleife nach oben, Blattpaar für Blattpaar, dann bindet sich die Schleife und die Bänder fallen.
Komponente
ornament/Wreath
1898
BK

C · Schemerlbrücke

Die Wehrbrücke am Nussdorfer Wehr (1894 bis 1898) hat Wagner als Stadttor gestaltet: An jedem Ufer steht ein mächtiger Pylon, der auf gegliedertem Unterbau einen Bronzelöwen von Rudolf Weyr trägt. Die Löwen sind hier nicht nachgebildet; die Pylonen tragen eine Laterne.

C 1

Stadttor

Vorbild
Pylonen der Schemerlbrücke
Einsatz
Rahmen für einen Auftakt, ein Zitat, eine Einladung. Hier kombiniert mit dem Donaukanal (C 3) darunter.
Bewegung
Die Pylonen werden vom Sockel aufwärts gebaut, die doppelte Brückenfahrbahn schließt sich von beiden Ufern, zuletzt gehen die Laternen an.
Komponente
ornament/CityGate

Nussdorf

Zwischen den Pylonen

Platzhaltertext. Hier steht später ein kurzer Inhalt, damit man sieht, wie sich Text in diesem Element verhält.

C 2

Fachwerk

Vorbild
Genietete Eisenträger der Stadtbahn- und Donaukanalbrücken
Einsatz
Schmaler Trenner, Unterstreichung unter breiten Titeln, Kante über der Fußzeile.
Bewegung
Die Gurte zeichnen sich von links, die Pfosten und Streben folgen Feld für Feld, dann erscheinen die goldenen Nieten.
Komponente
ornament/TrussBand

C 3

Donaukanal

Vorbild
Das Wasser unter der Schemerlbrücke
Einsatz
Ruhiges Band unter Brücken- und Torelementen, Ende einer Seite.
Bewegung
Fünf Wellenlinien gleiten unterschiedlich schnell nach links, solange das Band durch den Bildschirm läuft. Nichts läuft in Schleife, im Stillstand bewegt sich nichts.
Komponente
ornament/WaterLines

D · Secession

Olbrichs Ausstellungshaus von 1898: ein weißer Kubus, darüber eine durchbrochene Kuppel aus rund dreitausend vergoldeten Lorbeerblättern. Über dem Eingang stehen das Motto und die drei Gorgonen für Architektur, Skulptur und Malerei.

D 1

Lorbeerkuppel

Vorbild
Haus der Wiener Secession, Kuppel aus vergoldeten Lorbeerblättern
Einsatz
Großes Emblem für eine Startseite oder einen Bereich, Abschluss einer langen Seite.
Bewegung
Boden und Kubus zeichnen sich, die Pylonen wachsen, Lorbeerbäume und Mottoband erscheinen, dann füllt sich die Kuppel Blatt für Blatt von unten nach oben.
Komponente
ornament/LaurelDome

D 2

Inschrift

Vorbild
Motto über dem Eingang der Secession
Einsatz
Motto, Widmung, ein Satz, der stehen bleiben soll.
Bewegung
Die goldenen Doppellinien breiten sich aus der Mitte aus, die Schrift wird von der Mitte nach außen freigelegt, die Quadrate erscheinen.
Komponente
ornament/Inscription
Der Zeit ihre Kunst, der Kunst ihre Freiheit
Motto der Wiener Secession

D 3

Dreiklang

Vorbild
Die drei Gorgonen über dem Eingang: Architektur, Skulptur, Malerei
Einsatz
Drei gleichwertige Inhalte: drei Bereiche, drei Daten, drei kurze Texte. Auf dem Telefon untereinander.
Bewegung
Der Sturz breitet sich aus der Mitte aus, die drei Medaillons erscheinen, die Felder steigen nacheinander auf.
Komponente
ornament/Triad

Architektur

Platzhaltertext. Hier steht später ein kurzer Inhalt, damit man sieht, wie sich Text in diesem Element verhält.

Skulptur

Platzhaltertext. Hier steht später ein kurzer Inhalt, damit man sieht, wie sich Text in diesem Element verhält.

Malerei

Platzhaltertext. Hier steht später ein kurzer Inhalt, damit man sieht, wie sich Text in diesem Element verhält.

D 4

Lorbeerranke

Vorbild
Lorbeerornamente an den Wänden der Secession
Einsatz
Begleitet einen längeren Text am linken Rand.
Bewegung
Der Stängel wächst von unten nach oben, die Blätter öffnen sich paarweise, dann erscheinen Beeren und eine goldene Knospe.
Komponente
ornament/LaurelGarland

Platzhaltertext. Hier steht später ein kurzer Inhalt, damit man sieht, wie sich Text in diesem Element verhält.

Die Ranke steht in einer schmalen Spalte links vom Text und ist etwa so hoch wie zwei bis drei Absätze. Längere Texte laufen einfach weiter.

Platzhaltertext. Hier steht später ein kurzer Inhalt, damit man sieht, wie sich Text in diesem Element verhält.

D 5

Schmuckinitiale

Vorbild
Initialen der Zeitschrift Ver Sacrum und der Secessionsdrucke
Einsatz
Anfang eines längeren Textes. Der erste Buchstabe wird automatisch aus dem Text genommen.
Bewegung
Der Rahmen zeichnet sich Seite für Seite, der Buchstabe steigt in den Rahmen, die Eckquadrate erscheinen.
Komponente
ornament/Initial

Diese Initiale nimmt sich den ersten Buchstaben des Textes selbst. Für Screenreader und beim Kopieren bleibt der Text vollständig, nur sichtbar steht der Buchstabe im Rahmen. Der Text fließt rechts am Rahmen vorbei und darunter weiter, wie in einem Buch.

Platzhaltertext. Hier steht später ein kurzer Inhalt, damit man sieht, wie sich Text in diesem Element verhält.

E · Weitere Wagner-Bauten

Die Postsparkasse mit ihren Aluminiumnieten, das Majolikahaus an der Linken Wienzeile 40 mit seinen Fliesen und Rosenranken und das Nachbarhaus Nummer 38 mit den goldenen Medaillons von Koloman Moser.

E 1

Nietenrahmen

Vorbild
Fassade der Österreichischen Postsparkasse
Einsatz
Notizen, Hinweise, Steckbriefe, kurze Fakten neben einem Text.
Bewegung
Die Nietenreihen werden im Uhrzeigersinn gesetzt, oben links beginnend, dann erscheint die innere Linie.
Komponente
ornament/RivetPanel

E 2

Majolika

Vorbild
Majolikahaus, Linke Wienzeile 40
Einsatz
Farbiges Band über einem Bereich, Sockel einer Startseite, Abschluss einer Galerie.
Bewegung
Die Fliesen werden in einer diagonalen Welle von links gesetzt, dann wächst die Ranke darüber und ihre Knospen öffnen sich.
Komponente
ornament/TileBand

E 3

Goldmedaillon

Vorbild
Medaillons von Koloman Moser, Linke Wienzeile 38
Einsatz
Porträts, Personen, ein einzelnes wichtiges Bild.
Bewegung
Das Bild öffnet sich wie eine Blende, der Perlrand dreht sich in seine Lage, der Goldring schließt sich vom Scheitel aus, dann wachsen die Zweige.
Komponente
ornament/Medallion
Platzhalter: Sonne mit Strahlen
Platzhalterbild

F · Grundbausteine

Die allgemeinen Bausteine jeder Seite: Trenner, Bilder, Text, Filme und Verweise.

F 1

Ornamentlinie

Vorbild
Haarlinie mit Kreis und Quadraten
Einsatz
Standardtrenner zwischen Textabschnitten.
Bewegung
Keine; die Linie steht überall ruhig.
Komponente
Divider

F 2

Bildeintritte

Vorbild
Gezeichneter Rahmen, Stadtbahnbogen, flaches Relief
Einsatz
Bilder auf allen Seiten. Pro Seite möglichst nur eine Art verwenden.
Bewegung
Rahmen: der Rahmen zeichnet sich, das Bild öffnet sich wie ein Vorhang. Bogen: der Bogen öffnet sich aus einem Schlüsselloch, das Bild liegt tiefer. Relief: drei Ebenen gleiten leicht gegeneinander.
Komponente
Figure (entry: frame, arch, relief)
Platzhalter: Stadtbahn-Bögen
Rahmen
Platzhalter: Sonne
Bogen
Platzhalter: Gitter
Relief
Platzhalter: Stadtbahn-Bögen
Rahmen ohne Bewegung (motion={false})

F 3

Zitat

Vorbild
Große Schrift mit gezeichneter Goldlinie
Einsatz
Zitate und einzelne Sätze im Text.
Bewegung
Die Goldlinie unter dem Zitat zeichnet sich.
Komponente
Quote

Ein ruhiger Satz, der für sich steht.

Platzhalter

F 4

Horizontaler Abschnitt

Vorbild
Fries, der seitlich vorbeizieht
Einsatz
Drei bildschirmbreite Textkästen auf der Startseite.
Bewegung
Der Abschnitt hält an, die Kästen ziehen beim Scrollen nach links vorbei.
Komponente
HorizontalSection + Panel

Zu sehen auf der Startseite, unter dem Begrüßungstext. Er braucht die volle Bildschirmhöhe und steht deshalb hier nicht noch einmal.

F 5

Textblock

Vorbild
Gesetzte Textspalte mit Kicker und Überschrift
Einsatz
Fließtext auf jeder Seite. Auf breiten Bildschirmen zweispaltig: Kicker und Überschrift links, Text rechts.
Bewegung
Keine; der Text bleibt ruhig.
Komponente
TextBlock

Kicker

Eine Überschrift

Platzhaltertext. Hier steht später ein kurzer Inhalt, damit man sieht, wie sich Text in diesem Element verhält.

Platzhaltertext. Hier steht später ein kurzer Inhalt, damit man sieht, wie sich Text in diesem Element verhält.

F 6

Galerie

Vorbild
Raster aus Bildern
Einsatz
Mehrere Bilder nebeneinander, zwei oder drei Spalten (columns); jedes Bild kann einen Bildeintritt haben.
Bewegung
Wie beim gewählten Bildeintritt; ohne Eintritt keine.
Komponente
Gallery

F 7

Film

Vorbild
Eigener Film mit Vorschaubild und gezeichnetem Rahmen
Einsatz
Filme, die auf dem eigenen Server liegen (public/media). Lädt erst beim Abspielen, startet nie von selbst.
Bewegung
Der Rahmen zeichnet sich wie bei den Bildern.
Komponente
VideoBlock
Film · Platzhalter

F 8

Video-Einbettung

Vorbild
Gezeichnetes Titelbild mit eingebautem Abspielknopf (Bogen, Schnellzug, Dorfkirche, Kurzschluss) vor einem Video von YouTube oder dem Internet Archive
Einsatz
Die Videos-Seite. Vor dem Klick wird nichts vom Anbieter geladen; der Klick startet das Video hier auf der Seite.
Bewegung
Der Rahmen zeichnet sich wie bei den Bildern.
Komponente
VideoEmbed

F 9

Linksammlung

Vorbild
Ruhige Schilder mit goldenem Quadrat
Einsatz
Ein paar Verweise, auf der Startseite im Platz after der Durchfahrt. Externe Ziele tragen einen kleinen Pfeil.
Bewegung
In der Durchfahrt steigen die Schilder nacheinander auf (A 5); für sich allein stehen sie ruhig.
Komponente
LinkCollection