iPhone 4S debuted yesterday and with it a snazzy new “features” page. This is especially important to me because Apple used CSS3 animation to breath some life into it.
I’ll explain from a high-level overview so you can get an idea of whats going on.
HERE’S THE SETUP
We start with a large div (3200 X 3900) named “#phone-stage” set to
overflow:hidden will hide any portion of a child element that passes it containment boundaries. This effectively masks the #phone-stage div to the dimensions of the #clip div.
On #phone-stage there are six feature-modules. One for each of the new iPhone 4S features:
- A5 Chip
- iOS 5
The elements for each feature-module consist of mainly a logo and a few screenshot images.
There are also featured-text snippets associated with each feature-module. But the featured-text snippets are not children of #phone-stage. The snippets are placed into their own divs, independent of the main #phone-stage div (more later).
BODY MOVIN’, BODY MOVIN’
Now #phone-stage is loaded up with the 6 feature-modules. Each module has its opacity set to 0 and is positioned at different locations and rotations within #phone-stage. After 3-5 seconds (or upon key press or click event) the #phone-stage div will rotate and zoom to the next position.
As #phone-stage rotates and zooms into position, the child elements within each featured-module fade in and animate independently.
The featured-text snippets that reside in their own div animate into the featured-module with their own timing, and fading animation, unaffected by the zooming and rotation of phone-stage. This creates a very sophisticated, multi-layered effect with minimal animation layers.
RETREAT! MOVE! FALL BACK!
For browsers without CSS enabled animation they see the Featured/Hero slider. This script detects the browser ability to display CSS3/HTML5 animation. If the browser cannot display animation it will fallback to the typical feature-slider by hiding the animation code and displaying the fall back code.