I saw a post on Ajaxian about how iPhone 3.0 might now include SquirrelFish Extreme so I did a quick and dirty using this. Here’s are the results (raw spreadsheet here).
iPhone 3.0 definitely has something, (whether it’s SquirrelFish or Nitro), but it’s 3x-10x faster than iPhone 2.2.
Update: Dear Apple, if this is against the NDA shoot me an email waynepan at me dot com 
I just received a spam that I thought was a very clever way to by pass Gmail’s spam filters. They put in a docs.google.com link! They would probably never filter out email with links to docs.google.com! Genius.
If you’ve downloaded Safari 4 Beta then you’ve seen a very cool welcome screen. If you haven’t seen it click the video above (or if you’re running Safari 4 you can view it again here). I was curious as to how this page was put together so I did some dissecting…
HTML 5 – Cleverly, Apple decided to use HTML5 and the <audio> and <video> tags for the sound effects and part of the animation. The only part that is a full blown .mov is the ending compass sequence. Here is the .mov.
CSS Animation – The first 2 animations, the Apple logo (plus lens flare) and the Welcome to Safari 4 are achieved by a combination of CSS animations (stylesheet) and a series of images.
The Welcome to Safari 4, is the simplest of the 2. It uses this image:
… and this scaling animation rule:
@-webkit-keyframes header {
from {
opacity: 0;
-webkit-transform: scale(2.6);
-webkit-animation-timing-function: linear;
}
20% {
opacity: 1;
-webkit-transform: scale(1);
-webkit-animation-timing-function: linear;
}
77% {
opacity: 1;
-webkit-transform: scale(0.9);
-webkit-animation-timing-function: linear;
}
to {
opacity: 0;
-webkit-transform: scale(0.1);
-webkit-animation-timing-function: linear;
}
}
The Apple logo animation is bit more tricky and is achieved with these four images:
… plus 4 different css animation rules that are similar to the rule above but each image’s opacity is changed from 0 to 1 at the appropriate time.
Works on an iPhone – What’s more impressive is that this page more or less works on an iPhone! The .mov and audio do not play, but everything animations properly. I removed the javascript that disables the page for non-Safari 4 browsers and put it here http://waynepan.com/s/safari4.
Bonus! – At the end of all the animation, the page redirects you to topsites://, which of course takes you to Top Sites.
The Safari Welcome screen is a peak into the future. It shows us what’s possible when you get to throw all backwards compatibility concerns out the window… (no pun intended.)
