3 ms·
An explanation of the CSS animation on Apple's iPhone 4S webpage
- dudus 15y agoAre you explaining how it could be done in a simpler and less compatible way? Why do you just explain how they've done it.
- Spearchucker 15y agoA bit off topic - I find it surprising that the animations don't work in IE9. I'd've thought that the Microsoft user base is one Apple wants to get buying Apple products, and the iPhone is a good entry point.
- Steko 15y agoIt's really not Apple's fault that this animation won't work in IE until IE 10.
- CWIZO 15y agoYou missed OP's point. He is not bashing IE9 for not being able to run this animations and then blaming Apple for that. He is wondering why Apple didn't make the animations with something that would also work on IE9 considering that that are the users they want to get.
- Steko 15y agoSpoilers: ~ IE 9 users don't get a broken box that says "upgrade to Safari to see the animation". ~ They get an animation that's supported in IE 9. ~ When they get IE 10 they will probably see the slightly cooler one that Firefox/Chrome/Safari can see because they support it today.
- Hoff 15y agoBecause it makes the Apple stuff look better, particularly in comparison to the latest of the Microsoft browser products?
- huggyface 15y agoI wanted to watch a Garageband video (which is, in my opinion, the "killer app" of the iPad. It is the one thing Android tablets have or could even have until some future version eliminates the horrific audio latency), only it demanded that I have Quicktime. I have no interest in installing Quicktime.
- nextparadigms 15y agoWell, when Mozilla and others argued that "IE9 is not a modern browser", a lot of other people laughed at them because they thought IE9 doesn't need to support "many HTML5 specs", just a "a few good ones". Now you see the consequence of that. The reality is that IE9 is still about 2 years behind in HTML5 specs adoption, and you can easily tell that from the HTML5test.com site. Also, IE9 is still a pretty niche browser version. If they were to find an alternative for IE9, then they might as well find one for IE8, which has a much larger market share.
- jader201 15y agoIt looks like this is an oversimplification. The graphics and text are doing stuff independently of each other -- this illustrates that the graphics and text are moving together, and they're not. I would be curious to see how that -- the graphics and text moving independently -- really works.
- saurik 15y agoOf the five sentences on the page, the "oversimplification" aspect is specifically mentioned by one of them. "In the real version, the caption for each slide animates separately and the site degrades well in older browsers."
- ComputerGuru 15y agoNot just the caption though - the images too are on separate tiles. Watch carefully, they don't all rotate about the same axis or at the same time.
- mistercow 15y ago>I would be curious to see how that -- the graphics and text moving independently -- really works. The text appears to simply be in separate layers which move in from the sides along simple paths and then fade out.
- johnbhall 15y agoHi, it's johnbhall, the creator of the demo. Here's a video by YouTube user louisstamour that shows the exact animation: http://www.youtube.com/watch?v=8ASoqmyj19A http://www.youtube.com/watch?v=8ASoqmyj19A Apple's code is complex; my demo is simplified because I wanted the source code to focus only on the core idea of the animation -- the main phone stage that rotates and translates. All the other moving parts in the animation follow the same JS pattern as the phone stage: for each of the six states, there's a Slide object that contains JS objects that define the x, y, rotation, opacity, etc. for each element. These properties are applied to their respective elements when that state is transitioned to. See gallery.js. I hope my 5000-foot view is a good starting point for those interested in exploring Apple's source code for further explanation.