201227Aug

oriDomi: DOM-Elemente mit CSS3 falten

Mit CSS3 eröffnen sich gerade durch die perspektivischen Transformationen interessante Möglichkeiten. DOM-Elemente können dadurch räumlicher dargestellt und animiert werden. Ein schönes Anwendungsbeispiel dafür ist das Skript oriDomi, mit dem sich Elemente virtuell falten lassen. Dabei können verschiedene Richtungen und die Perspektive definiert werden.

oriDomi - Fold up the DOM like paper

Weiterhin lassen sich die Anzahl der horizontalen und vertikalen Unterteilungen sowie die Geschwindigkeit anpassen. Ein Code-Beispiel:

  • var $domi = $('.my-div').oriDomi({ vPanels: 3, hPanels: 10, perspective: 200, speed: 500, shading: false });
  • $domi.oriDomi('accordion', -30, 'right');

Das Skript ist nicht von einem Framework abhängig, kann aber bei Bedarf zusammen mit jQuery eingesetzt werden. Wem der Effekt gefällt, der kann sich bei GitHub den Quellcode ansehen.