Tag: javascript

In this tutorial we will build a photo gallery and enhance it with html5 canvas and css3 transitions. See the demo and try the hover effect. The grayscale “copies” of the images are created with canvas and we use pure css3 for the smooth changes.

We will use 300px x 300px images. The main containing element #wrap is centered up (margin: 0 auto) and given the width of 1020px (=340 x 3).
The list items are given float : left and are positioned relatively. The image title is wrapped in a div element that slides up on hover. To achieve a smooth effect we apply a css3 transition.
(Note that for the simplicity of this tutorial I don’t use any vendor prefixes. Therefore, you’ll find them in the source file to download).

Step 3: Canvas

Now, we will make use of the html5 canvas element to draw the grayscale versions of our images. Below you’ll find a createCanvas custom function that creates a canvas element, takes a copy of an image, performs the conversion and draws it to the canvas and finally inserts the canvas to the DOM where desired. With .each() method the createCanvas function is iterated across all images within the #gallery list.

And that’s it ! This example will not work in Internet Explorer versions below 9. You could provide an alternative solution using grayscale filter and adding some jQuery to recreate the transition effect on hover – but this part is not covered in this tutorial.