jsFiddle

• Run
• Edit

• JavaScript
• HTML
• CSS
• Result

/*
---
script: ElementStacks.js
decription: ElementStacks stacks elements/images on top of each other with a funky transition
license: MIT-style license.
authors:
 - Oskar Krawczyk (http://nouincolor.com/)
requires: 
  core:1.2.4: 
  - Class.Extras
  - Array
  - Function
  - Event
  - Element.Style
  - Element.Dimensions
  - Fx.Morph
  - Fx.Transitions
provides: [ElementStacks]
...
*/

// bigger demo: http://nouincolor.com/ElementStack/

var ElementStacks = new Class({
    Implements: [Options],
    
    options: {
        rotationDeg: 20,
        delay: 40,
        duration: 900,
        transition: 'back:out'
    },
    
    initialize: function(selector, wrapper, options){
        this.setOptions(options);
        this.pos, this.collapsed, this.wrapper = wrapper, this.stackItems = selector
        
        this.setDefaults();
    },
    
    setDefaults: function(){
        this.stackItems.each(function(stackItem){
            this.pos = stackItem.getPosition(this.wrapper);

            stackItem.store('default:coords', this.pos);
        
            stackItem.set('styles', {
                top: this.pos.y,
                left: this.pos.x
            });
    
            stackItem.set('morph', {
                transition: this.options.transition,
                duration: this.options.duration
            });

            // MooTools bug (?)
            (function(){
                this.setStyle('position', 'absolute');
            }).delay(1, stackItem);
        }, this);
        
        this.attachActions();
    },
    
    reStack: function(els, mode, altEl){
        var that = this;
        els.each(function(stackItem, i){
            (function(){
                var el = $pick(altEl, this);
                var rand = (mode === 'in' ? $random(-that.options.rotationDeg, that.options.rotationDeg) : 0);
                
                this.set('styles', {
                    '-webkit-transform': 'rotate(' + rand + 'deg)',
                    '-moz-transform': 'rotate(' + rand + 'deg)'
                });
                
                this.morph({
                    top: el.retrieve('default:coords').y + rand,
                    left: el.retrieve('default:coords').x + rand
                });
                
                if (mode === 'in'){
                    el.setStyle('z-index', 100);
                } else {
                    (function(){
                        els.setStyle('z-index', 10);
                    }).delay(that.options.delay * (els.length * 2));
                }
            }).delay(that.options.delay * i, stackItem);
        });
    },

    attachActions: function(){
        
        this.stackItems.addEvents({
            click: function(e){

                if (this.collapsed){
                    this.reStack(this.stackItems);
                    this.collapsed = false;
                } else {
                    var target = $(e.target);

                    if (target.retrieve('default:coords')){
                       this.reStack(this.stackItems, 'in', target);
                       this.collapsed = true;
                    }
                }
            }.bind(this)
        });
    }
});

new ElementStacks($$('img'), $('wrapper'));

<h1>ElementStack.js</h1>
<p>Click on one of the images to toggle stacks</p>

<div id="wrapper">
<img width="75" height="75" src="http://farm3.static.flickr.com/2697/4106711273_969cc50546_s.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2639/4142476380_7b928bdd6d_s.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2607/4194526085_a129ff3485_s.jpg" />
<img width="75" height="75" src="http://farm4.static.flickr.com/3298/3502874366_d73cb0f6fe_s.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2630/3795161224_1012daa415_s.jpg" />
<img width="75" height="75" src="http://farm3.static.flickr.com/2736/4158101064_89f08e4bff_s.jpg" />
<img width="75" height="75" src="http://farm4.static.flickr.com/3524/3880365897_682521f7b9_s.jpg" />
<img width="75" height="75" src="http://farm5.static.flickr.com/4072/4208775604_8d1e65578d_s.jpg" />
<img width="75" height="75" src="http://farm5.static.flickr.com/4005/4247684077_6848f141ff_s.jpg" />
</div>

body {
    background: url(http://img263.imageshack.us/img263/343/darkwoodsx7.jpg);
    font-family: "Georgia", "Times New Roman", serif;
    font-size: .8em;
    color: #fff;
    text-align: center;
    text-shadow: 0 -1px 0 #000;
}

h1 {
    font-size: 1.7em;
    line-height: 150%;
}

#wrapper {
    position: relative;
    height: 320px;
    width: 280px;
    margin: 15px auto;
}

img {
    position: relative;
    float: left;
    padding: 0;
    margin: 5px;
    -webkit-box-shadow: 0 0 5px #000;
    -moz-box-shadow: 0 0 5px #000;
    border: solid 2px #FFFAF2;
    border-bottom: solid 15px #FFFAF2;
    -webkit-transition: -webkit-transform 0.20s ease-in-out;
    -moz-transition: -moz-transform 0.20s ease-in-out;
}