In this little experiment we created an interactive photo desk that provides some “realistic” interaction possibilities for the user. The idea is to have some photos on a surface that can be dragged and dropped, stacked and deleted, each action resembling the real world act.

For example, if we drag a picture, it get’s “picked up” first, making it appear a little bit bigger, since it would be closer to us. Dropping it results in the picture being “thrown back” to the table, in a random rotation. Viewing all photos mirrors the action of collecting all images into a pile and viewing the first one in a none rotated way. Clicking to see the next one then, makes the previous one being thrown back to the surface. Deleting an image will make it appear as a crumpled paper ball.
When using the shuffle function, the photos get rotated and spread over the desk randomly.

You can download the source code of this and experiment with it, there are many more possibilities to discover and integrate.

We are using two important jQuery plugins: 2D Transform for animating rotations and Shadow Animation for animating the box shadow.

The images are taken from the amazing photostream of tibchris on Flickr.

The rotation did not work well with IE (although in principle it should) so we don’t rotate when IE is used.

We hope you enjoy this little experiment!!