Overlooked due to the recent launch of the App Store, the iPhone 2.0 software supports many new features well suited for iPhone web development. For example, microsites are now capable of increased native application integration, hardware-accelerated CSS animation, multi-touch gestures via JavaScript, offline AJAX-based data storage and many other capabilities.

This tutorial outlines a simple way to mimic the side-to-side flicking behavior common in iPhone applications such as “Photos”. This is accomplished using a recently discovered technique that Matthew Congrove demonstrated earlier this week. Check out a functional example here, or the video below.

Though the above example is more complex, the following CSS example demonstrates the animation technique he used to create it. WebKit makes this very simple by providing hardware-accelerated animation capabilities using CSS. The syntax is as follows:

.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; }
}

In the above example the author used JavaScript to trigger the animation. He’s posted a great tutorial on his blog outlining the example.

This concept could be applied to other CSS properties such as colors, border sizes, opacity, etc. It’s worth noting these techniques are only available for iPhones running the 2.x version of the device’s OS, because they take advantage of WebKit CSS properties that may not be available to earlier versions of the OS.

As noted on Tuaw, “MobileSafari includes some CSS 3 support, including advanced DOM selectors and support for animations and transitions. Chances are, other browsers will have limited support for CSS 3 draft standards, and whatever you write probably will only work in MobileSafari and Safari 3 on the desktop.”

While the App Store and Native App support may be receiving the current buzz, the future of mobile web content has certainly not been left behind. Stay tuned for a series of follow up articles and tutorials detailing other capabilities of web development for 2.0, and let us know if you have any ideas or feedback in the comments.

-Shaun Mackey

(3 votes, average: 4 out of 5)

 Loading ...