Augentier alias Tobias Wolf

Es ist da. Apple hat das iPad und damit auch viele neue User-Interfaces, die auf das Bedienen per Hand ausgelegt sind, vorgestellt. Sehr beeindrucken fand ich, wie Steve Jobs mit der iPhoto-App die Hochglanz-Fotos quer über den Bildschirm fliegen ließ - YouTube-Video.

Safari bietet zahlreiche Funktionen um solche tollen Animationen auch ins Web zu bringen. Deshalb dachte ich mir, dass es auch möglich ist vergleichbare Animationen zu erstellen. Ich wollte schließlich die iPhoto-App so gut es möglich ist nachzubauen.

Vorweg das Ergebnis

Leider braucht man den neusten WebKit-Browser, damit alles hundertprozentig dargestellt wird. Mit dem normalen Safari oder mit Chrome funktioniert nicht alles, aber man kann’s damit auch anschauen.

Eine kleine Erklärung

Ich möchte nicht alles im Detail erklären, wenn man möchte kann man sich die CSS- und JavaScript-Datei anschauen. Die 164 Zeilen sind leicht zu überschaubar.

Die größte Herausforderung war die unterschiedliche Größe der Fotos. Das vertikale Zentrieren ist mir nicht gelungen. Auch musste ich max-width und max-height verwenden, was der Safari in Verbindung mit -webkit-transform noch nicht unterstützt. Deshalb sieht das etwas abgehackt aus. Die Stacks sind alle absolut positioniert. Besser wäre es natürlich, wenn sich alles unabhängig von der Auflösung verhält, so habe ich es auf die Breit und Höhe des iPad-Displays angepasst.

Solltet ihr Fragen haben, meldet euch bitte in den Kommentaren.