I had a few spare hours a couple of weeks ago so I thought I'd expand of the 'moving tiles' concept of the homepage of this site and add some more visual sugar at the same time. The homepage of the site is based around a 5 column design, the footer of which follows through the rest of the site.  The top main 5 columns on the homepage show recent articles and portfolio pieces and scroll across to reveal up to the most recent 10 or so.

Previously only 5 panels at a time were visible, with left and right arrows allowing the user to 'scroll' the next panel on the screen with each click, but I was never really happy with the way this looked.  What I wanted to do was add some 'depth of field' to the site to go with the parallax scrolling background.  After some thought I decided it would be nice to have extra panels hovering off the left and right edges of the main central 5 panels, but it took a bit of experimentation to get something that worked ok.

IE users will see something different from Firefox, Chrome and Safari users but hopefully the concept has been preserved (to show there are more than just the first five panels available to view!) for all users.  For browsers that can do it I've utilised some HTML5 canvas magic and added a simple blur to the images in the edge panels so they seem slightly out of focus.  I've also added some scaling animation curtesy of CSS3, again only for browsers that can understand it.  Finally there is the ubiquitous JQuery transparency for the edge panels so they are made to look very obviously available but not currently focussed.  Put all this together and on CSS3/HTML5 capable browsers you get a nice depth of field effect when scrolling the panels left to right, with the parallax background also moving behind it all.  On IE you still get the transparency on the edge panels but none of the other niceness (apart from the parallax background movement).

Its worth noting that IE8 (and possibly 9?) seriously mis-behaved on animating the opacity of the edge panels and after a little research it seems this is a common and ongoing issue with that browser in particular.  It annoys me, but the only way to get around this without spending hours to look for a work around was to force IE8 into IE7 compatibility mode which ironically seems to do a much better job of these things.

Performance wise I was pleased how well each of the test browsers dealt with the CSS3 transitions, it seems that building these transition straight into the browser rending engine gives a level of performance and smoothness similar to Flash and difficult to achieve through just using javascript alone.  I look forward to the day when these effects because ubiquitous but I fear it still won't be for a long while!

UPDATE: It seemed that my site update introduced a weird intermittent loading order bug which I've now fixed.  If you noticed the footer not loading correctly from page to page then this is what was causing it.