Creating a HTML version of this blog’s header

Update: this post was made when I was using a different blog design. Please view the original swf file here.

Below is a little experiment I did which involved creating a version of this blog’s image flipping Flickr feed header (which I made in Flash) – in HTML/CSS/Javascript.

Luckily jQuery includes a JSON parsing feature and Flickr provides a JSON feed and so it was very easy to get the Flickr feed. The image flipping was done with CSS3’s 3D transforms and so unfortunately it will only work in Chrome and Safari. Now I just need to work out how to get more than 20 images from the Flickr feed (I need 36 to fill the header), and turn the images black and white. I found a jQuery plugin that apparently can apply image effects but I haven’t gotten it to work yet.

Check it out – Chrome and Safari only

Posted toCSS3 Experiments HTML Interactive Javascript