In this tutorial you’re going to learn how to create a virtual light table using jQuery and CSS3. A traditional light table is a flat illuminated panel that you can place transparent slides on for viewing. Our “light table” is going to be an image of a wooden kitchen table, and the photos will be prints rather than transparencies, but the basic idea is the same!
The aim is to make our table and photos look as realistic as possible. Here’s our desired feature list:
- A wooden table background image for the photos to sit on
- Each photo “floats” onto the table as it loads
- Each photo is given a random position and orientation to create a “scattered” effect
- The photos have a white border and drop shadow to add a 3D effect, and are ever-so-slightly transparent
- Once on the table, a photo can be dragged around by using the mouse
Ready? Let’s go!