This post describes a little experiment using Flickr API, a webkit browser with support for CSS animations and transformations i.e. -webkit-animate and -webkit-transform and a little bit of jQuery that holds everything together. One important aspect is, that the developed animation should also run smoothly on mobile devices like the iPhone and the iPad.
The main idea is an endless stream of photos flying by the viewport using some nice CSS animations. So the perfect photosource seems to be the public Flickr stream. This brings us to step 1: Load Photos from Flickr.
Load Photos from Flickr
Collecting our photos is quite simple as Flickr offers their public streams in jsonp format – i.e. JSON Data passed to a Javascript function call. The Base url for all Flickr REST Methods is:
http://api.Flickr.com/services/rest/
The required parameter for this url is ‘method’, in our case we want to get the recent public photos so we use
method=Flickr.photos.getRecent
In addition to that we want some extra data (the url to the medium sized file, and the name of the flickr member posting the file) in our json stream. Therefore we set two additional parameters:
format=json&extras=url_m,owner_name
Last we want to pass a json callback so we can overcome ajax crossdomain restrictions. Luckily jquery helps us here and we only have to add
&jsoncallback=?
So the complete url to our Flickr stream should look something like this:
http://api.Flickr.com/services/rest/?method=Flickr.photos.getRecent&format=json&extras=url_m,geo,owner_name&jsoncallback=?
Combined with some jQuery code we can load all photos inside the json stream and put the photos in our animation queue (aka a simple javascript array):
Now that we finished the code to access our data source, we can create the basic HTML and CSS for our page.
Set up HTML and CSS
Next thing up we will define the stage on which our animation takes place. In essence we just need a container and some element to hold our photo. So the basic HTML structure looks something like this:
To make this structure look like a polaroid we simply reset the ul to no margin, padding and list type. The main style is attached to the li element using a white border, a nice dropshadow and a little bit rounded corners. In addition to that we offset the image just outside the top left corner of our viewport:
The div and small elements are just positioned at the top of the polaroid with a white background – nothing special there. Now our Polaroid should look something like this:
As a nice touch we can also add some gradient to the body background using for example:
background:-webkit-gradient(linear, 40% 0%, 24% 100%, from(#666666), to(#969696))
This finishes the basic CSS setup and we can go on to defining the animations needed.
Defining the animations needed
To animate the photos we first need to setup our viewport aka stage with some perspective – 800 seems to look quite nice – and in addition to that preserve the 3d style for child elements:
To animate the polaroid i choose three steps (can be combined into one, but i split it up just for clarity). First we want to move the photo from outside the stage to the center and add a little bit of life to this animation with some 3d rotation. This can easily be accomplished using @-webkit-animation – see the example below:
By using some additional keyframes at different points in time (25%, 75%) the pace and style of the animation can be alterated. To start the animation you just need to define an additional css class with the -webkit-animate property. As soon as this CSS class is added to an element, the animation starts:
The next two animation steps pop up the image to a larger size using the scale transformation. After a certain amount of time, the third animation simply drops the image out of the viewport:
Nothing more is needed to define the animations! Only one piece remains – a little bit of jquery code that defines the Application flow.
jQuery code
The last step is the code that binds together the bits and pieces. The workflow is quite Simple: on pageload we load the Flickr stream and fill our image queue. Then we start the animation cycle: We take the first image out of the queue and add it to our polaroid element. At the same Time we also start preloading the next image in the queue. Then we start the animation by first moving the image to the center, then popping it up, waiting a little bit, then dropping it out. As soon as the dropping out animation is finished, we reset out polaroids to its initial position and start all over again, gradually working down our image queue:
Note that i simply used javascript timers with setTimeout to reduce this examples lenght. It should of course be the preferred way to use the webkit animation events (webkitAnimationStart, webkitAnimationEnd) as described on Apples developer site.
With the flow described above we use just one html element that we animate all over again. Adding new elements for each photo would be possible too, but this can trigger a reflows that reduce performance. On mobile devices like the iPad this could result in long running applications fill up the available memory. This inevitably leads to a browser crash. To add a little bit more life to the effect it would always be possible to add some more elements and alterate between them.
The final Result
The final result looks something like the picture below, but of course it is better to view the live demo using a webkit based browser.
