How to create a drag-and-drop Polaroid-style image gallery
Use CSS3 and jQuery to build an interactive Polaroid photo style gallery.
Flash is officially no longer the go-to option for interactive effects on a website. Of course it’s still useful for many things, but where you simply want to create an interactive carousel or slideshow effect, JavaScript is increasingly the weapon of choice for the majority of web designers.
This is great in most cases, but the more elaborate the effects become, the more potential for slow-down as JavaScript performance creaks under the pressure. Browser vendors have been doing much to alleviate this by redeveloping their JS rendering engines, but with the advent of CSS3 web designers can now take advantage of native rendering of common effects, reducing script workload and thus improving the user experience.
In this tutorial we’re going to create a popular effect – scattered Polaroid-style photos that can be moved around on a surface. We’re aiming to make it fun to interact with the design, so the images will need to respond to input with scale, rotation and movement. We’ll use CSS3 where we can to deal with the animation, and jQuery to enable the drag-and-drop aspect, highlighting the strength of a combination approach.
The end result is a tidy little gallery that works across different browsers, with a nice level of visual panache as well as slick user interaction.
currently there's 2 comment(s)
reed
commented on June 13, 2012 at 10:44 am
Hi Sam,
I saw the drag-and-drop Polaroid tutorial in Web Designer magazine and was wondering if there is any way to make your JavaScript project work on the ipad? I tried to incorporate “Touch Punch” into the mix with zero success.
samsayshi
commented on July 7, 2012 at 9:21 am
Hmm. It should be possible with Touch Punch. I haven’t had the chance to try it yet (still no iPad in my life), but the developer is open to answering any questions about his app. You can reach him on his plugin page HERE. Happy coding!