SketcHub @ Multitouch Table. Florianguenther/zui53. Prezi - Presentation Software. Zoomooz.js. Zoomooz is: 6KB gzipped and 18KB minified. This includes everything but jQuery. Make any web page zoom. Latest version: 1.1.9 (Nov 11, 2013, hacky fix for the back and forward buttons #66) Zoomooz is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details. Quirky transformations You can zoom to elements that have been translated, scaled and skewed, and they will morph correctly. Try by clicking on these: Skew Scale Rotate There is some interesting stuff happening in the background to make the morphings work. Adding Zoomooz to your web page Just add this to your web page head and you should be up and running with Zoomooz: The easy way to zoom Simply add "zoomTarget" to the element you want to zoom to when clicked on: <div class="zoomTarget">This element zooms when clicked on.
You can also add some additional attributes for tuning the animation as data fields of the element: Here is a demo, click on the elements: Demos. Create a zoomable user interface with CSS transforms | CSS3. Knowledge needed: CSS, Intermediate JavaScript Requires: Text editor, browser that supports CSS3 transforms Project time: Three hours Download source files This article first appeared in issue 216 of .net magazine - the world's best-selling magazine for web designers and developers. With CSS3 transforms now supported in most major browsers, we have the delightful opportunity to create innovative layouts and interfaces.
No longer are we shackled in our one-dimensional prisons, bound to the tyranny of vertically-scrolling sites. With the site for BeerCamp at SXSW 2011, we at nclud recognised an ideal opportunity to bend some rules and try something new. I got the idea to leverage CSS transforms for the layout. Instead of the typical vertical scrolling site, where you traversed it downwards, this would could be traversed inwards. The BeerCamp at SXSW 2011 was an experiment in using CSS transforms to create a new interface design pattern. Basic layout Now we can start adding CSS transforms. Create a zoomable user interface | CSS3. This article first appeared in issue 216 of .net magazine - the world's best-selling magazine for web designers and developers. With CSS3 transforms now supported in most major browsers, we have the delightful opportunity to create innovative layouts and interfaces.
No longer are we shackled in our one-dimensional prisons, bound to the tyranny of vertically-scrolling sites. With the site for BeerCamp at SXSW 2011, we at nclud recognised an ideal opportunity to bend some rules and try something new. I got the idea to leverage CSS transforms for the layout. Instead of the typical vertical scrolling site, where you traversed it downwards, this would could be traversed inwards. This is sort of design pattern has been categorised as a zoomable user interface or ZUI. The BeerCamp at SXSW 2011 was an experiment in using CSS transforms to create a new interface design pattern. Our example page lists the services of a web development shop. Basic layout Now we can start adding CSS transforms. Scroll.