Marco Fucci

ElementStacks 1.1 stacks elements/images on top of each other with a funky animation.

jQuery version of ElementStacks by Oskar Krawczyk.

New in 1.1:

• you can now define the initial state to be collapsed
• you can now define which stack item to be stuck with by using a static value (e.g. 'first', 'last') or a dynamic function

Dependencies

• jQuery 1.2.3+
• jQuery Easing Plugin (optional)

How to use

$(<wrapper>).elementStacks();

Options

• itemsSelector: selector for the stackItems inside your wrapper. Default img.
• rotationDeg: degree of the rotation. Default 20.
• delay: delay between the animation of the elements. Default 40.
• duration: duration of the animation for each element. Default 900.
• transition: the name of the easing effect that you want to use. Default swing.
• stuckWithItem (new in 1.1): null, ‘first’, ‘last’, function or index (0-based) of the stackItem to be stuck with. Default null.
  The function takes 2 arguments:
  
  • wrapper: DOM element defined by your principal selector in the elementStacks call
  • opts: options
  and returns the 0-based index of the stackItem you want to be stuck with.
• initialCollapse (new in 1.1): true if you want the initial state of the stack to be collapsed. Default false.

Usage

Example 1: initialCollapse = true

Example 2: with stuckWithItem function

Using a function which returns a random index:

function(wrapper, opts) {
    var imgs = $(opts.itemsSelector, wrapper);
    return imgs[Math.floor(Math.random()*imgs.length)]
}

Download

• Version 1.1: tgz | zip
• Version 1.0: tgz | zip
• Source Code on GitHub

License

ElementStacks is licensed under MIT.