I had been talking on my Twitters about experimenting with HTML5+CSS3 with touch events a few times, so I thought I should share as someone out there might find these useful. I got my iPad to play around with touch, and it’s already given me a few ideas about what to do next.

The Canvas experiment was my first foray into touch events. Put your finger down, and it draws circles. Put two fingers down, it draws lots of circles. Put all 10 of your fingers down, and you have a storm of circles.

This uses the touchmove event to loop through all the fingers that are passed through the touch event handler, drawing a circle at each.

The Flick experiment was on applying CSS3 transforms and animations to make a nice smooth effect when you attempted to drag around a box. I’m planning on applying this to Get a Home for the photo pop-up.

Put your finger on the box and drag left/right. Let go and it’ll animate back to its original position. Not only is it using Touch events, but also WebKit Transition Events. Basically, in the touchend event, I apply the CSS3 “Transition” property – “all 0.25s ease” – and then remove the “Transform” property. It makes this nice effect that you’d be used to when, say, you don’t drag your finger enough to go further in a list, or even you are at the end of the list and get that bounce effect.

You can use them in Chrome, but you won’t get the full effect. Plus it appears that Chrome 14-dev is rather broken right now with Canvas. (However, while developing the Flick experiment, I found that Safari Mobile ran it better than Chrome-dev did).

Feel free to modify either as you see fit. There are a lot of effects you can play around with in the Flick experiment!