It started with Brian King setting up our Google+ page using this round MDN logo by John Slater. I thought this looks cool and reminded me of the famous MGM intro so I wondered if I could turn it into an intro for our video tutorials (not sure if we will do that though). And, some photoshop and sound work later and with a sprinkle of HTML5 audio and CSS transitions, here we are (source on GitHub):
Saving them as OGG and MP3 gave me an audio element that I could tie into. All I needed was to listen to the
timeupdate event and compare the
currentTime to trigger the animations. The animations (rotation of the dino and opening and closing of the jaw) are CSS transitions triggered by classes on the parent element. The main trick was to store both the dino and the jaw inside a div and transition them separately. The jaw animation also needed a change in transformation origin as we don’t rotate the image around its center.
If you got seven minutes to spare, here is a blow-by-blow screencast explaining what is going on:
About Chris Heilmann
Principal Evangelist at Mozilla for HTML5 and open web. Let's fix this!