oriDomi – Origami für Websites mit Javascript und CSS3

Die Kunst des Papierfaltens, besser bekannt als Origami, bringt Objekte zustande, die man nicht auf Anhieb für möglich gehalten hätte. Allerdings ist die Technik extrem komplex. Man faltet schon mal eine halbe Stunde vor sich hin. Nicht ganz so komplex ist das JavaScript oriDomi, das aufgrund der Nähe des Namens zum eben genannten Origami, schon erahnen lässt, was seine Aufgabe ist. Es faltet DOM-Objekte und kann so interessante Effekte auf Websites bringen.

oriDomi faltet und biegt alles, was nicht niet- und nagelfest ist

Vor einiger Zeit stellten wir hier bei Dr. Web Paperfold CSS vor. Die experimentelle Demo aus dem Mozilla Developer Network faltete zu Beispielzwecken einen Kommentarstrang zu einer Ziehharmonika zusammen. oriDomi, ein kleines JavaScript-Tool aus der Feder des Entwicklers Dan Motzenbecker, kann das auch, geht dabei aber mehrere Schritte weiter.

So kann oriDomi beliebige DOM-Objekte falten und/oder verzerren. Dabei kann es sich beispielsweise um Bilder, Webfonts oder sogar animierte Gifs handeln. Motzenbecker unterhält eine Demoseite mit etlichen Funktionsbeispielen. Schön an oriDomi ist vor allem, dass es für den Live-Einsatz tauglich ist und nicht im experimentellen Stadium von Paperfold CSS erhebliche manuelle Eingriffe für den persönlichen Anwendungszweck erfordert.

oriDomi kann mit jQuery zusammen arbeiten, setzt es aber nicht voraus. Ebenso ist die Initialisierung über die Standard-DOM-API möglich. jQuery erspart lediglich etwas Tipp-Arbeit. Wer es ohnehin einsetzt, kann davon profitieren. Ähnlich wie Paperfold CSS arbeitet auch Motzenbeckers Tool mit CSS 3D Transforms, arbeitet mithin also nur in modernen Browsern, die dieses Feature unterstützen. Unterstützt ein Browser die Eigenschaft nicht, passiert im Grunde nichts. Alle Elemente werden korrekt angezeigt, lediglich die Transformations-Effekte sind nicht sichtbar.

Da Motzenbecker iOS-Entwickler ist, liegt es nahe, dass er oriDomi mit besonderer Nähe zum Apple-System erstellte. Nach seinen Angaben läuft das Script in Webkit-Browsern, wozu bekanntlich auch der Mobile Safari zählt, daher am besten. Bestehende Performanceprobleme in Firefox will er kurzfristig beheben.

Bereits in der eben erst veröffentlichten, sehr frühen Version bringt oriDomi eine Menge Effekte und sogar Callback-Funktionalität mit. Transforms können über verschiedene Achsen, sowie aus verschiedenen Richtungen in verschiedene Richtungen erfolgen. Neben dem Falten der DOM-Objekte lassen sich diese auch strecken oder verzerren, also in der Perspektive ändern.

oriDomi steht unter der MIT-Lizenz kostenfrei auf Github zur Verfügung. Motzenbecker ist für Bug-Hinweise jederzeit dankbar.