Batman Style Delete Confirmation

Recently Steve came up with an idea for cool delete confirmation messages. So it started off with him saying “wouldn’t it be cool if when you deleted something one of those old batman comic actions displayed on the screen!” in his excited idea voice and his Scottish accent (a strange mixture I know).

So Steve went a away and did some CSS3 magic to get a really nice animation working that showed these messages in the web browser just like they used to on the old batman tv shows. Whilst this was looking good the problem he found was that really the animation needed a few stages  - set the starting position, animate out then animate back in. After each stage of animation the next had to start and it needed to be seamless. Using CSS3 Steve was able to create each animation but to get them to work he needed to hook them up to actions that relied on the user to initiate.

So Steve handed his work over to me and asked me to see what JavaScript I could use to get his animations all working seamlessly. I added in some JavaScript which waited for each animation stage to finish before starting the next animation.

It turns out that by using CSS3 we could achieve these animations in a few lines that would normally take a huge amount of code if written entirely in JavaScript. Then by using JavaScript as the controller we could manipulate the CSS3 to work when we wanted it to.

So to view this happy combination of CSS3 and JavaScript have a go with our demo – batman style delete confirmations. Be warned that because of it’s reliance on CSS3 transforms you will need to view this demo in Chrome, Safari or Opera. At the time of writing this blog, only Firefox’s current Beta release supports the CSS3 transforms and IE is….. well, IE.

This entry was posted on June 12, 2010 at June 12, 2010 and is filed under HTML/CSS, JavaScript, UI. You can follow any responses to this entry through the RSS 2.0 feed.