Following on from my previous posts on html5 animation and reflection effects, I thought I’d put it all together and create a carousel.
I then create a pseudo class to calculate the position of images in the carousel. I work out the angle of separation between each image by dividing 360 degrees (2 * Math.PI) by the number of images . I use sine and cosine functions to calculate the image positions on an oval (with co-efficients so that the oval is wider than it is tall to create perspective). I finally scale images, so that images higher up the page are smaller, thus appearing further away.
I create a top level class is called Carousel. This takes an array of image urls and plots them at calculated locations via the above classes. An important point to note is that as setting the z-position does not appear to be possible in the Canvas element, I work out all of the images positions and store in array before plotting them . This allows me to sort based on y-position, so images higher up the page appear at the back of the carousel (thus simulating z-position).
In the page onload event, I create an instance of my Carousel object, passing in an array of images paths (these make up the nodes on the carousel). I finally set a setInterval method to redraw the canvas every 40ms (i.e. to produce 25 frames per second).
Note that at present, I haven’t set up any event handling (e.g. responding to mouse click, or arrow key presses).
Also note that I have tested this on IE9, Firefox and Chrome. It runs smoothly on IE9, but there’s a reasonable amount of flicker on the other two.
Please feel free to get in contact if you have any questions.
Written by Rob Nowik