Aquamunda

Die Website Aquamunda befasst sich mit dem Thema der Membran-Wasserfilter zur sauberen Trinkwassergewinnung. Die Animationseffekte wurden diesmal nicht mit Hilfe von JavaScript realisiert, sondern das Interesse lag hier ein wenig auf den CSS3 Eigenschaften Transitions, Transform und Scale. Bewegung wird bei den Infokärtchen über die Wasserfiltertechniken beim Mouseover erzeugt (um 1 Sekunde verzögert drängen sie in den Vordergrund, vergrößern sich und ändern die Position). Die einzelnen Kärtchen sind so angeordnet wie ein Zylinder mit Filtern und die Durchnummerierung entspricht der zeitlichen Entwicklung der jeweiligen Membrantechnik.

Browserkompatibilität: Beste Darstellung in WebKit Browsern wie Safari und Chrome. Leider zeigt Firefox die easing Funktionen der Transition Timing Eigenschaften nicht so gut an, und Opera unterstützt bei der transform Funktion nicht den Wert rotate. Natürlich werden diese CSS3 Eigenschaften in IE 7 und IE 8 nicht dargestellt, trotzdem ist es möglich, die Inhalte der Website in diesen Browsern zu lesen.

Weblinks: http://www.w3.org/TR/css3-transitions/, http://www.w3.org/TR/css3-2d-transforms/

Website B & E Software

Vor kurzem habe ich die neue Website von B & E Software fertig gestellt. Ein paar Features: WordPress wurde als CMS eingesetzt, auf der Homepage kommt der Nivo Slider zum Einsatz, die dynamische Schriftersetzung mit Cufón bindet die Schriftart Anivers ein und jCarousel Lite wurde für die Rotation der Kundenmeinungen in den Sidebars verwendet.

Link: http://be-software.de/

Neue Projekte

Ich habe in der letzten Zeit an zwei Projekten gearbeitet: Zunächst habe ich ein Side Template für Themeforest entworfen. Das Template besitzt viele jQuery Extras, so z.B.: jCoda-Slider, dropdown Menü, Lightbox etc… Als font-replacement Technik habe ich Cufón eingesetzt. Das 960 Grid System sorgt wieder für die notwendige visuelle Ordnung. Mehr Details findet man hier: http://themeforest.net/item/stripy/65516

Dann habe ich noch für meinen Bruder seine Website erneuert. Die jQuery Effekte lagen hier hauptsächlich in der Navigation und im Slider: LavaLamp Menü, gedämpftes Einblenden bzw. Ausblenden der Photos und Texte im großen Slider und Farbverläufe in der unteren Navigation. Diesmal habe ich als font-replacement Technik @font-face verwendet. Ausgesuchte Schriften waren „Aller“ für das Logo und „Gnuolane“ für die Überschriften. Link:http://www.it-kuempel.de/