De Q42 aftiteling van 2009 in HTML 5 met CSS 3
2009 hebben we afgesloten met een gezellige aftiteling, die als #paasei in onze relatiegeschenken verwerkt zat.
Zoals wel vaker zijn we ons behoorlijk verloren in onze passie, en hebben we veel te veel tijd gestoken in het opleuken en crossbrowser en crossplatform maken van dit beestje. Het werkt nu wel in alle moderne browsers, en Internet Explorer 6, en op iPhones, Androids, Windows Phones en een aantal Nokia’s.
De aftiteling is het mooist in Safari en Chrome. Voor die browsers konden we een extraatje toevoegen met CSS transitions. Het was verdacht makkelijk, waardoor we ons snel afvroegen: hoe makkelijk zou het zijn om de aftiteling met alleen HTML 5 en CSS 3 te maken?
Het antwoord: erg makkelijk. Makkelijker dan de originele versie. En met minder code. En vooral leuker!
Zie hier het resultaat: de Q42 aftiteling van 2009 in HTML 5 met CSS 3 . (Deze versie werkt alleen in Chrome en Safari, en dus ook op de iPhone.)
Stiekem hebben we toch een klein beetje JavaScript gebruikt. We wilden de animaties namelijk precies op de maat hebben, dus ‘onplay’ van het audio element doen we een class-switch op de body, waarmee de CSS animations van start gaan. En we detecteren ook even of je niet met je iPhone aan het kijken bent, want dan doen we de class-switch meteen. Safari op de iPhone speelt namelijk geen geluid af. Daarnaast laten we de foto’s achterwege op de iPhone, omdat het anders wel erg zwaar werd.
Bekijk de Q42 Kerstgroet 2009 zelf op je PC of Mac én op je telefoon:
(Voor wie het zich afvraagt: de muziek is inderdaad de tune van Star Wars, gespeeld door orgelguru Klaus Wunderlich, wiens klassiekers natuurlijk regelmatig aanstaan tijdens onze lunches.)