Merging Image Boxes with jQuery

Today we will show you a nice effect for images with jQuery. The idea is to have a set of rotated thumbnails that, once clicked, animate to form the selected image. You can navigate through the images with previous and next buttons and when the big image gets clicked it will scatter into the little […]
By in Playground on
mergingImageBoxes
View demo Download Source

From our sponsor: Market smarter with Mailchimp's automated messaging tools.

Today we will show you a nice effect for images with jQuery. The idea is to have a set of rotated thumbnails that, once clicked, animate to form the selected image. You can navigate through the images with previous and next buttons and when the big image gets clicked it will scatter into the little box shaped thumbnails again.

When the window gets resized, the positions of the thumbnails will automatically adapt to fit the screen. We are using the jQuery 2D Transform plugin for the animated rotation. You can find the plugin here: http://plugins.jquery.com/project/2d-transform

The beautiful photographs are by tibchris and you can find his stunning works on his Flickr page:
http://www.flickr.com/photos/arcticpuppy/

When navigating through the full images, we will reveal the next or previous image by removing the current image box by box.

Have fun with the demo and download the ZIP to experiment with this cool effect!
The whole animation looks best in Google Chrome and Apple Safari.

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

GridToFullscreen_featured

Creating Grid-to-Fullscreen Animations with Three.js

Revealers_featured

How to Create and Animate Rotated Overlays

TextDistortionEffects_featured

Text Distortion Effects using Blotter.js

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 88

Comments are closed.

  3. I tried to insert the numbers of pixels as you suggested. unfortunately does not work. Please help me…Thanks

  4. Hi is it possible to alter the code that the effect starts with the single image and from there you can click the controls and have other images come in box by box? I’m trying to edit it that i get rid of the initial boxes that come unto the screen and just have the one single image change as i click through.

    Thanks 🙂

  5. Has anyone worked out how to contain this within a table? Would help be out a treat as it is amazing but doesnt fit with my site

  6. Great job
    I would like to change the display with only 12 thumbnails 200px by 200px and a full image 800px by 600px
    Can you help me.
    Sorry for my english