This is a myDailyPhoto iPhone test application utilizing the Apple iPhone Touch Javascript API, along with the new CSS transitions and animations provided by WebKit.Try flicking your fingers on the screen, as you would while viewing your iPhone photo library, to change the content.
Each of these content containers is simple a DIV with a unique, sequentially numbered ID, e.g. 'Div1', 'Div2', and so-on. To add more content containers simply add a new DIV and number all of the DIVs accordingly. At this time, because the CSS transitions are based on classes, you must style each DIV using it's ID or do it inline. It would not be too difficult to intelligently add / remove the transition classes to any existing classes, though.
The code for this demonstration is all static and loads along with the entire body. It would be rather simple, though, to make an AJAX request to retrieve data from a database or external flat file. Because the incoming DIV moves into view fairly quickly (1s transitions), it is suggested that you pre-load at least one DIV that would come next upon flicking. It may be advisable to pre-load more than this number, but this is up to your discretion.
For more information about this test application please visit the myDailyPhoto Development Blog at mydailyphoto.com/blog.
Application by Matthew Congrove.
Application by Matthew Congrove.