Zur iPhone-Animation auf apple.com/iphone
Das harte Wochenende verlangt nach einem ruhigen Start in die KW 11. Wir empfehlen den Klick zu John Hall. Der Software-Entwickler hat sich Apples CSS-Animation auf apple.com/iphone näher angeschaut und demonstriert den dort eingesetzten Rotations-Effekt anhand eines transparenten Nachbaus.
For the phone stage to cycle from one slide to the next, its css transform property is updated with new translate and rotate values. At the end of the cycle, the phone stage’s transition duration is temporarily set to 0ms while slide 6 resets to slide 1.
Dieser Artikel enthält Affiliate-Links. Wer darüber einkauft unterstützt uns mit einem Teil des unveränderten Kaufpreises. Was ist das?
Für was manchen Menschen zeit haben.
Tja, mit sowas verdienen Webentwickler eben ihr Geld :-)
Wen sowas interessiert?
da gibt es sicher einige jenseits des eigenen kleinen Tellerrands..
Wenn man davon Null Ahnung hat, dann natürlich nicht.
Danke an die Red. Dieser artikel hat mir sehr viel zeit gespart da ich genau den selben Gedanken hatte und die Animation zerlegen wollte um diese Anschliessend in einer anderen Form für mein Portfolio nachzubauen.
Mehr davon!
So ähnlich funktioniert das übrigens auch mit der Navigations-Bar bei Apple.
Dieses Bild wird einfach an andere Position gesetzt je nach „Zustand“ der Navigation:
http://images.apple.com/global.....balnav.png
Naja… so ähnlich?
Bei Johns Beispiel geht’s um CSS Transitions. Bei deinem Beispiel geht’s um Sprites, eigentlich ganz was anderes! (Aber natürlich auch interessant)
Danke an John Hall, jetzt hat mein Leben wieder einen Sinn!
Ich hätte wohl zur Entschlüsselung an dieser hochkomplizierten Animation bis an mein Lebensende gesessen!!
Wenn wir schon beim Thema Apple-Webseite sind: warum wird die iPad Startseite über den Firefox nicht animiert während über den Safari auf der gleichen Seite ein kleines Video kommt?
http://www.apple.com/ipad/
Firefox hat die falsche Engine unter der Haube …
Apple bindet das Video hier über HTML5 ein, sie haben jedoch innerhalb des video-Tags nur eine MP4-Version des Videos hinterlegt.
Insofern mein Wissen noch aktuell ist, unterstützt Firefox bisher nur WebM und Ogg als Videoformate.
Das Bild, was du unter Firefox siehst, ist anscheinend als Hintergrund des Elements angelegt, um den Fall, dass das Video nicht angezeigt wird, abzufangen.
Ich hoffe, ich konnte dir helfen :)
Ja, konntest du. Danke schön :)
Kostet Geld das mpeq daher kann man noch lanfe auf Safari-Support warten.