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/

4 Kommentare zu “Aquamunda

  1. Interessante Informationen! Ich werde mich damit in Zukunft mehr auseinandersetzen! Warte auf neue Eintraege!

    AntwortenAntworten

  2. Danke Ursula, toll gemacht, ich bin sehr zufrieden mit der Darstellung. Die Idee ist auch sehr gut – das passt perfekt zum Inhalt der Website und ist eine absolut neue Darstellungsweise. Freut mich, dass du immer neue Ideen einbringst.
    Schönen Gruß Ingrid

    AntwortenAntworten

  3. Hallo Ursula,

    habe mir gerade Deine neue Seite angeschaut und bin ganz begeistert von der dynamischen Idee! Das ist mal was anderes.

    Sehr kreativ!

    AntwortenAntworten

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>