Zoomooz.js

Zoomooz on iPad video

Download Zoomooz.js (zip)

Version 0.86 (April 6, 2011, fixed a bug with non-body zoom root)

Fork me on GitHub!

Praise

"The fantastic Javascript zooming library has been updated to work with Firefox 4."
— @azaaza

"Really awesome example of a zoomable interface with JavaScript"
— @tdhooper

"Amazing little js library for zooming and rotating that works with JQuery"
— @mike_j_edwards

"#prezi like styles for your own website. damn cool and pretty easy"
— @wollepb

Zoomooz in use

Aza Raskin prototyping with Zoomooz

A photo gallery using Zoomooz

A zooming comic experiment

Simple HTML Slides uses Zoomooz

Flickr image stack

Isometric cube

SVG Tree demo

Zooming container demo

Enabling the library

Put the following in the head-section of your page:

<link rel="stylesheet" href="style/zoomooz.css" type="text/css" />
<script type="text/javascript" src="lib/sylvester.js"></script>
<script type="text/javascript" src="lib/jquery-1.4.2.js"></script>
<script type="text/javascript" src="js/purecssmatrix.js"></script>
<script type="text/javascript" src="js/jquery.animtrans.js"></script>
<script type="text/javascript" src="js/jquery.zoomooz.js"></script>

Adding zoom effect

This adds a simple zoom on clicking to elements with class "zoomTarget". The zoom can be reset by clicking the body.

<script type="text/javascript" language="javascript">
  $(document).ready(function() 
    $(".zoomTarget").click(function(evt) {
      $(this).zoomTo();
      evt.stopPropagation();
    });
    $("body").click(function(evt) {
      $(this).zoomTo({targetsize:1.0});
      evt.stopPropagation();
    });
  });
</script>

Browser support

All major browser platforms supported now:

Supported versions

Internet Explorer 9
Safari 3 and newer
Firefox 3.6 and newer
Recent versions of Opera and Chrome

Detailed settings

settings = {
	// zoomed size relative to screen
	// 0.0-1.0
	targetsize: 0.9,
	// scale content to screen based on their size
	// "width"|"height"|"both"
	scalemode: "both",
	// animation duration
	duration: 1000,
	// easing of animation, similar to css transition params
	// "linear"|"ease"|"ease-in"|"ease-out"|
	// "ease-in-out"|[p1,p2,p3,p4]
	// [p1, p2, p3, p4] refer to cubic-bezier curve params
	easing: "ease",
	// use browser native animation in webkit
	// true|false
	nativeanimation: true
}
$(this).zoomTo(settings);

Bugs and issues

Does not work with full-page zooming in Webkit
Requires a separate css file.
Native animation problem in Webkit: animation not working in Webkit with very long pages when zooming with rotation.
Css box-shadows make animations crawl.
Transforming elements with text content in Opera is buggy.
Rotation goes sometimes via the wrong direction.

Some feature ideas

Make it work in older IE versions.
Have zooming out return to the same scroll position
Support for 3d transformations.
Hide elements that are not shown while transforming.
Kinetic scrolling.

jQuery