Mac OS X users will be familiar with the poof animation that occurs when application icons are removed from the dock. The animation looks nice, is unobtrusive, and provides a clear indication of the function being performed.
mootools/poof/index-class.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xhtml; charset=utf-8" />
<meta name="description" content="Free poof sprite animation for use with mootools" />
<meta name="keywords" content="poof,mootools,icon,free,gpl,mit" />
<title>mooTools poof effect | bestpract.us</title>
<script type="text/javascript" src="/mootools/js/mootools-1.2-core.js"></script>
<script type="text/javascript" src="/mootools/js/mootools-1.2-more.js"></script>
<script type="text/javascript" src="js/poof-class.js"></script>
<link rel="stylesheet" type="text/css" href="css/poof.css" />
</head>
<body>
<h1>mooTools poof effect example</h1>
<p>graciously copied from <a href="http://www.kombine.net/examples/icons/jquery/poof/" title="kombine.net">kombine.net</a></p>
<h2>But why?</h2>
<p>The simple reason - because I can! The only way to get better and understand a javascript library better is by doing things like this - converting other people's code (which helps you understand their library's code). This was mainly an excercise in building a Class, and also to get it to be able to handle new elements being dynamically added to be removed.</p>
<div class="example">
<p>Click the boxes to delete them.</p>
<div class="deleteme">delete me 1</div>
<div class="deleteme">delete me 2</div>
<div class="deleteme">delete me 3</div>
<div class="deleteme">delete me 4</div>
<div class="deleteme">delete me 5</div>
<div class="deleteme">delete me 6</div>
<div class="deleteme">delete me 7</div>
<div class="deleteme">delete me 8</div>
<div class="deleteme">delete me 9</div>
<div class="deleteme">delete me 10</div>
<div class="deleteme">delete me 11</div>
<div class="deleteme">delete me 12</div>
<div class="deleteme">delete me 13</div>
<div class="deleteme">delete me 14</div>
<div class="deleteme">delete me 15</div>
<div class="deleteme">delete me 16</div>
<div class="clear"></div><hr />
</div>
<p><a href="js/poof-class.js" title="Poof Class JavaScript Code">Poof Class JavaScript Code</a></p>
<script type="text/javascript">
/*<![CDATA[*/
window.addEvent('domready', function() {
// this initiates the class, and is also where you'd pass any options
var pf = new Poof();
// the script below is relevant only to the styling of this specific example page
// it sets up the alternating colors of the deletable boxes
// and is not necessary for making the poof function
// you may safely ignore or delete it
$(document.body).getElements('.deleteme:even').addClass('even');
});
/*]]>*/
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-2161286-5");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</body>
</html>mootools/poof/js/poof-class.js
/** * Mac OS X users will be familiar with the poof animation that occurs when * application icons are removed from the dock. The animation looks nice, is * unobtrusive, and provides a clear indication of the function being performed. * * Based off the jQuery Poof Effect by Kreg Wallace * http://www.kombine.net/news/jquery-poof-effect/ * * @author Keith Baker <keithtbaker@gmail.com> * @copyright Copyright (C) 2008, Keith Baker * @license MIT * */ var Poof = new Class({ Implements: [Options, Events, Chain], /** * defaultOptions * Options used in typical implementations * * imagePoof: the path to the image (relative to the page it will be on) * elAnimation: the element containing the top-down vertical reel animation * elRemove: the elements to be removed on click * frameCount: number of frames in the sprite animation * frameHeight: height of poof frames in pixels * frameWidth: width of poof frames in pixels * frameDuration: set duration of each frame (in milliseconds) */ defaultOptions: { 'imagePoof' : 'images/poof.png', 'elAnimation' : 'poofAnimation', 'elRemove' : '.deleteme', 'frameCount' : 5, 'frameHeight' : 32, 'frameWidth' : 32, 'frameDuration' : 100 }, /** * initialize * Initialize an instance of the Poof class */ initialize: function(options){ // Set runtime options this.setOptions($merge(this.defaultOptions, options)); // Create Poof Div var poofDiv = new Element('div', { 'id': this.options.elAnimation, 'styles': { 'background': 'transparent url(' + this.options.imagePoof + ') no-repeat 0 0', 'cursor': 'pointer', 'display': 'none', 'height' : this.options.frameHeight, 'position': 'absolute', 'width' : this.options.frameWidth, 'z-index':1000000 } }).inject($(document.body)); // Activate elements this.activate(this.options.elRemove); }, /** * activate * Activate elements for removal */ activate: function(els){ $$(els).each(function(el){ el.addEvent('click', function(){ this.poof(el); }.bind(this)); }.bind(this)); }, /** * absolutelyCenter * Absolutely center one element over another element */ absolutelyCenter: function(bottom, top){ var bottomCenterX = ((bottom.getSize().x.toInt() / 2) + bottom.getPosition().x).toInt(); var bottomCenterY = ((bottom.getSize().y.toInt() / 2) + bottom.getPosition().y).toInt(); var topX = bottomCenterX - (top.getSize().x.toInt() / 2).toInt(); var topY = bottomCenterY - (top.getSize().y.toInt() / 2).toInt(); top.setStyles({'top': topY, 'left': topX}); }, /** * poof * Make the element go *poof* */ poof: function(el){ var target = (arguments.length > 1) ? arguments[1] : null; // make this element disappear el.morph({'duration': (this.options.frameDuration * this.options.frameCount) / 2}).set('styles', {'opacity': 0.1}); // position the animation $(this.options.elAnimation).set('styles', {'display': 'block'}); this.absolutelyCenter((target != null) ? target : el, $(this.options.elAnimation)); // run the animation var fxChain = new Array(); for(i = 0; i < this.options.frameCount; i++) { fxChain[i] = function(){ $(this.options.elAnimation).set('styles', {'background-position': '0px ' + (0 - ((this.options.frameCount - this.$chain.length) * this.options.frameHeight)) + 'px'}); new Fx.Morph($(this.options.elAnimation), {'duration': this.options.frameDuration, 'onComplete': function(){this.callChain()}.bind(this)}).start(); }.bind(this); if (i == (this.options.frameCount - 1)){ // kill this element fxChain[i+1] = function(){ ((target != null) ? target : el).destroy(); $(this.options.elAnimation).set('styles', {'display': 'none', 'background-position': '0 0'}); this.callChain(); }.bind(this); } } this.chain.apply(this, fxChain); this.callChain(); } });