Apple has a pretty cool web page for the iPhone 4S. It’s not something you would expect to see on a web site.
When I first saw it, I had assumed they were all separate images being animated one at a time. I know it had to be CSS3 doing the transitions, but didn’t realize quite how elegant the solution was.
@johnbhall does a great job illustrating Apple’s approach to making the site we see on the iPhone 4S page. His example simplifies Apple’s approach a bit (imagine his example, but with multiple sprite images, one for phones, one for copy).
I took the original article creator at his word, but some things didn’t add up.
@johnbhall says that his example is jsut a demo, but he has the concept behind the iPhone 4S page entirely wrong.
How do I know? It’s pretty easy…
Not one asset is particularly huge (as would be required for 2 separate “big” sprites), the largest asset is for the imagery on the iCloud “slide”. It’s a standalone graphic (and at 693K, it’s about 10x larger than any other graphic on the page … did someone forget to optimize?)
Take a look for yourself, Here’s how I investigate
Open up the page in Chrome (the most recent version, or even Safari if you want). If you watch the animations you’ll see there are minute details to the animation that 2 single sprite canvases couldn’t replicate. Notice how some items follow different animation paths?
Now right click on the stage area (on top of one of the big iphones) and click “Inspect Element”.
You should be looking at a “catch all” anchor tag, to capture all mouse clicks with ID of “feature-link”.
Two elements before that in the DOM is a div with class “phone-stage” … sounds promising.
If you look inside there you’ll see the following divs:
- phone siri
- phone camera
- camera side
- camera back
- phone a5
- phone siri final
Now open any one of them up. Click on the “icloud” classed div, and you’ll see a single IMG tag which links to that absurdly sized 700KB image. Half of the page’s weight is in that one element, which isn’t particularly special to me.
So … no huge canvas, no cool background animating tricks, just lots of individual PNG animations.
It is important to note that most of the assets on the page are called “fallback”, but I see those assets when I load the site up in Safari.
Do mac users see this differently? I’d expect they don’t, because you can’t match these animation types with 2 single large sprites.
So that’s how you find out what’s really going on. You can see in the source the inline styles being adjusted with “-webkit-transform: translateZ” and other CSS3 (kinda) features.
Sorry for the earlier misinformation.