iPhone 4S: How’d Apple Make that Site?

Tuesday, October 25th, 2011 | Business | by

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).

UPDATE

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
  • ios-group
  • phone camera
  • camera side
  • camera back
  • phone a5
  • icloud
  • 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.

 

Related Posts

Tags: , , , ,

4 Comments to iPhone 4S: How’d Apple Make that Site?

Mario
October 25, 2011

But takes for ever to load the first time.

seangw
October 25, 2011

Yeah, looks like Apple forgot to optimize one of the images. I think 700KB is still too big nowadays.

seangw
October 26, 2011

After looking through code again, it looks like I had misinterpreted @johnbhall’s original statement.

His site only said the images were on one big canvas, not that they were sprites. Which they aren’t.

He and I both see the same thing, which is there are many smaller images, which are animated by their parent div (which there are a few of to make the animations happen appropriately.

steve
January 10, 2012

The file is made up using separate images (as the text fades in and out independantly of the images) Also interestingly, the phones seem to be svgs with clipping masks around them. Look at the very bottom of the html files source code.

The jquery in this is massively complicated so instead of trying to replicate this, I’m learning how to rotate, transform and chain items so I have full control over it. But it is an interesting slide show. :)

Leave a comment

*


Please share, it makes me happy:

Subscribe to Email Alerts

Follow Me

Follow seangw on twitter

Archives

Categories

prestashop theme

virtuemart template