/* * jquery.elementStacks. * Stacks elements/images on top of each other with a funky transition. * * Jquery version of http://mootools.net/forge/p/elementstack * by Oskar Krawczyk (http://nouincolor.com). * * Copyright (c) 2010 Marco Fucci * http://www.marcofucci.com/tumblelog/15/mar/2010/elementstack_v1-1/ * * Licensed under MIT * http://www.opensource.org/licenses/mit-license.php * * Launch : January 2010 * Version : 1.1 * Released: 10th Jan, 2010 */ //START PLUGIN (function($) { var defaultStuckWithItemFunc = function(wrapper, opts) { var selector = [opts.itemsSelector, ":"]; if (opts.stuckWithItem == 'first' || opts.stuckWithItem == 'last') { selector.push(opts.stuckWithItem); } else { selector.push("eq(", opts.stuckWithItem, ")"); } return $(selector.join(""), wrapper) }; $.fn.elementStacks = function(options) { var opts = $.extend({}, $.fn.elementStacks.defaults, options); return this.each(function() { var pos, collapsed = false, stackItems = $(opts.itemsSelector, this).css({'z-index': 10}); var $that = this; stackItems .each(function(index, img) { $(img) .attr('coords', this.offsetTop + ':' + this.offsetLeft) .css({'top' : this.offsetTop, 'left' : this.offsetLeft }); }) .css({'position': 'absolute'}) .click(function(e) { var $this = $(this); if (!$this.attr('coords')) { return; }; collapsed = !collapsed; var target = (collapsed) ? ( (opts.stuckWithItem != null) ? $((jQuery.isFunction(opts.stuckWithItem) ? opts.stuckWithItem : defaultStuckWithItemFunc ).call(this, $that, opts)) : $this ).css({'z-index': 100}) : null; $this.one('stackfinished', function() { if (!target) { stackItems.css({'z-index': 10}); } }); stackItems.each(function(index, stackItem) { setTimeout(function() { $.fn.elementStacks.reStack.call($this, $(stackItem), collapsed, opts, target, index, index == stackItems.length -1); }, opts.delay * index); }); }); if (opts.initialCollapse) { $(opts.itemsSelector + ":eq(0)", $that).click(); } }); }; $.fn.elementStacks.defaults = { 'itemsSelector': 'img', 'rotationDeg': 20, 'delay': 40, 'duration': 900, 'transaction': 'swing', 'stuckWithItem': null, //null, 'first', last', function or index of the stuck element (0-based) 'initialCollapse': false //true if you want the initial state to be collapsed }; $.fn.elementStacks.random = function(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); }; $.fn.elementStacks.reStack = function(stackItem, collapsing, options, target, index, last) { var coords = (target ? target : stackItem).attr('coords').split(':'); var rand = (collapsing ? $.fn.elementStacks.random(-options.rotationDeg, options.rotationDeg) : 0); var $that = this; stackItem.css({ '-webkit-transform': 'rotate(' + rand + 'deg)', '-moz-transform': 'rotate(' + rand + 'deg)' }).animate({ top: parseInt(coords[0]) + rand, left: parseInt(coords[1]) + rand }, options.duration, options.transaction, function() { if (last) { $that.trigger('stackfinished'); } } ); }; })(jQuery); //END PLUGIN /* * Easing Plugin (http://gsgd.co.uk/sandbox/jquery/easing/) * NOT required but recommended. */ jQuery.extend(jQuery.easing, { easeOutBack: function (x, t, b, c, d, s) { if (s == undefined) s = 1.70158; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; } }); //Usage $('#wrapper').elementStacks({ 'transaction': 'easeOutBack', 'initialCollapse': true });
Click on one of the images ... <div id="wrapper"> <img width="75" height="75" src="http://farm4.static.flickr.com/3213/2464885290_208ca5afa7_m.jpg" /> <img width="75" height="75" src="http://farm3.static.flickr.com/2305/2464064429_2310ab60b2_m.jpg" /> <img width="75" height="75" src="http://farm3.static.flickr.com/2143/2769889963_7d51ce2702_m.jpg" /> <img width="75" height="75" src="http://farm1.static.flickr.com/206/459884053_8a7a9dc2c8_m.jpg" /> <img width="75" height="75" src="http://farm1.static.flickr.com/251/459884041_92ae9dcc0f_m.jpg" /> <img width="75" height="75" src="http://farm1.static.flickr.com/214/459884021_17921233c5_m.jpg" /> <img width="75" height="75" src="http://farm1.static.flickr.com/191/459792641_2771d6afa0_m.jpg" /> <img width="75" height="75" src="http://farm4.static.flickr.com/3213/2464885290_208ca5afa7_s.jpg" /> <img width="75" height="75" src="http://farm1.static.flickr.com/206/459884053_8a7a9dc2c8_m.jpg" /> </div> <a href="http://www.marcofucci.com/tumblelog/15/mar/2010/elementstack_v1-1/" target="_blank">find out more</a>
body { background-color: #000; 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; } a { color: #FFFFFF }