Scale - zoom transition (jquery plugin)

index.html

    <ul>
<li>(ajax)
 <a href="http://thatsthespir.it" class="ajax"><img src="http://placehold.it/350x150" alt="" /></a>
</li>
<li>(fullrefresh)
 <a href="http://thatsthespir.it" class="full"><img src="http://placehold.it/350x150" alt="" /></a></li>
<li>(ajax)
 <a href="http://thatsthespir.it"  class="ajax"><img src="http://placehold.it/350x150" alt="" /></a>
  </li>
</ul> 
<div class="container">Hi</div>

<p>Gist available <a href="https://gist.github.com/pixeline/f7f1eb9c40d6f786aa2f">here</a>.</p>

Scale - zoom transition (jquery plugin)

Scale - zoom transition (jquery plugin)
---------------------------------------
Simple jquery plugin that create a "zoom into" animation, especially good for anchors, to visually express that the link will lead to "more information". A [Pen](http://codepen.io/pixeline/pen/bVZGrM) by [pixeline](http://codepen.io/pixeline) on [CodePen](http://codepen.io/).

[License](http://codepen.io/pixeline/pen/bVZGrM/license).

script.js

;(function(defaults, $, window, document, undefined) {

	'use strict';

	$.extend({
		// Function to change the default properties of the plugin
		// Usage:
		// jQuery.pluginSetup({property:'Custom value'});
		pluginSetup : function(options) {
			return $.extend(defaults, options);
		}
	}).fn.extend({
		// Usage:
		// jQuery(selector).zoomInsideAnimate({property:'value'});
		zoomInsideAnimate : function(options) {
			options = $.extend({}, defaults, options);

			$('body').append('<div id="zoomInsideAnimate-placeholder" style="border:'+options.border+';position:absolute;top:0;left:0;background:'+options.background+';'+options.css+'"></div>');
			var $placeholder= $('#zoomInsideAnimate-placeholder');
			var target = {};
			target.el = (options.target !='') ? $(options.target) : $(window);
			target.top = (options.target !='') ? target.el.offset().top : 0;
			target.left = (options.target !='') ? target.el.offset().left : 0;
			console.log(target.top);
			
			return $(this).each(function() {	
				$(this).on(options.event,function(e){
					e.preventDefault();
					var $this = $(this);
					$this.css('display','inline-block');
					var width = $this.outerWidth();
					var height = $this.outerHeight();
					var top = $this.offset().top;
					var left = $this.offset().left;
					var url = $(this).attr('href');
					$placeholder
					.width(width).height(height)
					.css({top: top+'px', left: left+'px'})
					.show()
					.stop()
					.animate({
						width: target.el.width(), 
						height: target.el.height(), 
						top: target.top, 
						left: target.left
						}, "slow", 
						function(){
							$placeholder.hide();
							if(options.followThru && url){
								window.location.href = url;
							} else if (!options.followThru && options.target && url){
								target.el.load(url);
							}
						});
					});
				});
			}
		});
	})({
		event : "click", // type of event that triggers the animation
		followThru : true,  // if there is a href attribute, should the animation end with following through that url ?
		border: '1px solid #111', // styling the square
		background: 'transparent', // styling inside the square
		css: '',
		target: ''
	}, jQuery, window, document);
	
	// USAGE:
	$('a.full').zoomInsideAnimate({followThru: true, background: 'transparent', css: 'opacity:.8'});
	$('a.ajax').zoomInsideAnimate({followThru: false, background: 'transparent', css: 'opacity:.8', target:'.container'});

style.css

html{overflow:hidden;}
body{overflow: auto;}