HTML 5 / JavaScript: Creating a Carousel

Following on from my previous posts on html5 animation and reflection effects, I thought I’d put it all together and create a carousel. Firstly, I create a JavaScript pseudo class called CarouselImage. This takes an image url and draws it at a given co-ordinate, scaled by a co-efficient (used to simulate perspective). This class also…


HTML5 / JavaScript: Reflections and Skew Effects

In carousel and coverflow type controls, you often see a “reflection” type effect. This is normally done by transforming an image to mirror the original then applying an alpha gradient to this (i.e. progressively increasing the transparency of the image). I recently attempted to recreate this effect in HTML5 / JavaScript. It appears that you…


HTML5 / JavaScript Canvas Animation

In this article, I will show how to create a basic animation using JavaScript and the HTML 5 Canvas elements. The animation uses two png images (of concentric circles with transparency) that move within the constrains of the canvas to create a nice pattern effect. This demo has been primarily built for IE9; it has…


The Cool Wall is Back

For those of you who are fans of the BBC show Top Gear, you may remember the Cool Wall, and now you can get your very own Cool Wall along with the launch of IE9 beta and BBC’s Top Gear site. I have been very fortunate to be a member in the team within UK…