Wednesday, August 6th, 2008
iPhone Safari Flick Navigation By Example
Matthew Congrove took some time to play with the iPhone SDK, but it wasn't his bag, so he decided to go back to building a Web application for the iPhone, and was pleasantly surprised with the updates to Safari that enabled new things:
In the midst of all my research for help I stumbled across something that I, like most, had completely forgotten about; the iPhone update wasn't just for native third-party applications, but it also upgraded the existing applications. Yes, that includes Safari. The upgrade for the iPhone's on-board browser added in support for CSS animations and transitions, a JavaScript accessible database, a few new DOM selectors and more. For me this meant that the myDailyPhoto web application could look and feel more like it was a native Cocoa Touch enabled experience. As soon as the idea crossed my mind I sat down to churn out this little test app.
To get the flick effect Matthew wrote the following CSS:
-
-
.divSlide {
-
-webkit-animation-name: "slide-me-to-the-right";
-
-webkit-animation-duration: 1s;
-
}
-
@-webkit-keyframes "slide-me-to-the-right" {
-
from { left: 0px; }
-
to { left: 100px; }
-
}
-
Booooo!
That’s just too easy, for old time’s sake could you throw in some old school css hacks ;P
Well done.
OMFG, this is simply awesome!
Say, does the ‘animation’ and ‘keyframe’- from and to keywords state, that it can actually do much more than just move objects? Like if I tell the stylesheet to animate…
from { background-color: green; }
to { background-color: blue; }
..will it animate the background? And how is the animation triggered?
j4k3 -
Yes, you can use it to animate colors, border sizes, opacity, and pretty much any other CSS property. So, for instance, you could do a nice Scriptaculous-esque fade-out without Scriptaculous. I’m sure that the iPhone Safari Developer page has some more insight on exactly what properties are supported; I suggest you go there for the final word.
To answer your question about the trigger, do it through JavaScript. For instance, in the example in the blog post, I’d change the class name of a DIV to ‘divSlide’ through JS. This would then grab the styles for the new class, sees the animation call, and pulls up the keyframes.
Check out the blog entry I wrote (the ‘myDailyPhoto’ link above) for a whole bunch of information on this stuff.
- Matt Congrove