how-did-they-do-that-with-html5.md

title	authors	intro	types	categories	published	updated	status
How did they do that (with HTML5)?	thebeebs	Ok, I’m biased, but some of the most excitin...	shorts	article	2012/03/21 12:00:00	2012/03/21 13:00:00	archived

Ok, I’m biased, but some of the most exciting stuff happening on the web right now is being driven by HTML5 and CSS3. From addictive, lightweight games to immersive, engaging sites, there’s so much great work being done out there.

The thing is, often these sites are using pretty basic HTML5 and CSS3 elements. But the artistry and care involved mean the result is something a bit special. So in this post, I want to draw attention to five projects that have caught my eye and highlight a little about what makes them tick.

1. World’s Biggest Pacman Everyone developing a new site or game will be focused on user engagement. We all want people to love what we do and, importantly, tell all their friends and colleagues (whether face to face or across social media). On the face of it, the World’s Biggest Pacman site is a pretty basic idea – allow people to create their own Pacman mazes that can be played by themselves and others. Technically, it is a relatively straightforward implementation of the canvas element in HTML5. But the result is incredibly addictive – over 2 billion pac-dots eaten, 21 million mazes played, almost 3.5 million visitors. Not too shabby.
2. **Nike Air Jordan 2012 **You couldn’t get much more of a contrast between the low-fi of World’s Biggest Pacman and Nike’s supper slick Air Jordan 2012 site. Yet behind the eye candy, Air Jordan 2012 also uses the canvas element, allowing users to navigate the site by simply using the scroll wheel on their mouse. The real skill comes in how the developers are using canvas (an plain old divs) to give the impression of graphics rotating and exploding in real time. And again, the attention to detail is simply fantastic.
3. IE Testdrive Touch Effects The IE Test Drive site has some great experiments in using HTML5 and other technologies to create some stunning effects. The Touch Effects experiment is best viewed on a tablet running IE but you can also use pretty much any desktop browser and a mouse. To get the effect, it uses the IE10 pointer element (although you could could combine the W3C and IOS touch events with this too, this post shows you how.
4. **OLO **I only recently stumbled across OLO. It’s a simple, addictive little game that involves players trying to slide tiddly-wink-style pieces into a target area (while their opponents try to knock them back out and get their own pieces into play). It is designed for the iPad and uses HTML5, CSS3 and Sprite 3D to achieve its beautifully smooth, reactive motion and the kinetic interaction between the pieces. I’m actively looking to see if I can port this to IE10, I'll let you know how i get on.
5. SVGGirl How’s your Japanese? This little Manga-style animation appears at first glance to be like so many other Flash-based efforts. But it’s not. As the name gives away, it’s made up of scalable vector graphics (SVGs). At first sight, this may seem like a colossal waste of time. But get to the end and you’ll discover that you can change the colours of any of the elements. And because it is all vectors, it recompiles the movie super fast.

As you can see, while the developers of all these sites are certainly doing some clever stuff, it isn’t out of the realms of possibility for anyone competent with HTML5 and CSS3 to achieve similar effects.

So those are my favourites, what are yours?