Apple.com/iphone slideshow: How does it work?

Question

so this is more a curiosity question than an actual question so please bear with me. I just checked out :

http://www.apple.com/iphone/

And the cover slideshow just looks really impressive to me. I do not want to reproduce it, but I am just genuinely interested in how this works. From my inspection, they just use a bunch of timed webkit transitions/transformations, but I don't know exactly whats going on.

Also, is there an easy way to create this behavior without hardcoding it, because that's what I would do right now.

Answer 1

I'm just answering my own question, since no one could really offer me an answer besides hard coding. I assume Apple just puts a lot of effort in it. i'm still impressed by the sophisticated use of css transitions, especially where objects would transition into the next frame

Answer 2

Here's an explanation: http://johnbhall.com/iphone-4s/

Answer 3

Here's a working demo with source code.

Basically the idea is,

• preload all the images

• there's a timer, which fires every N seconds

• when the timer fires, start a transformation animation, which slides the new image in.

---

Elaborations on the idea allow you to stop/reverse/pause/resume, to automatically stop after one cycle, and so on.

---

The tradename for this effect is "slider". so you can google for slider and find lots of discussion. There are sliders for jquery (nivoslider), there's one for mootools (slideitmoo), there's framework-free options (like the scriptiny demo I linked), and so on.