I’ve spent a little time recently trying out some newer html5 features as well as Facebook Integration.
Cheers!
I was browsing through my Facebook photos recently and the shots of friends enjoying drinks on a night out reminded me of the opening credits from Cheers. Wouldn’t it be great, I thought, if you could create your own version of this iconic intro using pictures of your own friends.
Demo
The demo project I’ve been working on allows you to log in to Facebook and select an album of photos. These photos are then treated with a sepia filter and animated through pan-zoom transitions to the familiar tune “Where everybody knows your name”.
Audio
The music is played using an HTML5 audio element. Don’t forget, when using HTML 5 audio that mp3 encoding isn’t supported in some Windows versions of Firefox so you need to use an ogg file instead. You can check whether mp3 is supported before attaching the source using something like:
var src = 'audio/cheers.mp3';
var mp3Test = new Audio();
var canPlayMP3 = (typeof mp3Test.canPlayType === "function" && mp3Test.canPlayType("audio/mpeg") !== "");
if (!canPlayMP3) {
src = 'audio/cheers.ogg';
}
Sepia filter
The sepia filter isn’t well supported, but in Chrome and Firefox you can use:
-webkit-filter: sepia(100%); -moz-filter: sepia(100%); filter: sepia(100%);