/*
 *  metro.js - Win8 Metro UI onclick effect [v1.0]
 *  Distributed under the Do-wathever-the-hell-you-want-with-it License
 *
 *  Web site:   http://claudiobonifazi.com
 *  Blog:       http://claudiobonifazi.com?p=4
 *  Email:      [email protected]
 *  Twitter:    @ClaudioBonifazi
 */

(function($){
    $.fn.metroClick = function( e, callback ){

                var el = $(this), origin = 0, ang = 10, orizorvert = 0, duration = 200, anim,
                        mouse = {x:e.pageX-el.offset().left,y:e.pageY-el.offset().top};

                // for a better antialiasing
                if(el.css('box-shadow')=='none')
                        el.css({'box-shadow':'0 0 1px transparent'})

                // needed to define how much links should tilt
                el.parent().css({'-webkit-perspective':el.outerWidth()*5})

                //identify mouse position relatively to the clicked box
                if( mouse.x < el.outerWidth()/3 ){
                        orizorvert = 1          //  left
                        origin = 100
                        ang = -ang
                }else if(mouse.x > parseInt(el.outerWidth()*2/3)){
                        orizorvert = 1          // right
                }else{
                        if(mouse.y < el.outerHeight()/3){
                                orizorvert = 2  // center-top
                                origin = 100
                        }else if(mouse.y > parseInt(el.outerHeight()*2/3)){
                                orizorvert = 2  // center-bottom
                                ang = -ang
                        }
                }

                return $.each(el,function(i,e){
                        if( orizorvert > 0 && $.browser.webkit)
                                $(e).css({'-webkit-transform-origin':(orizorvert==1 ? origin+'% 0%' : '0% '+origin+'%')})
                                .animate({'z-index':$(e).css('z-index')},{duration:duration,step:function(now,fx){
                                        anim = ang*Math.sin((fx.pos*Math.PI))
                                        $(e).css({'-webkit-transform' : 'rotate'+(orizorvert==1 ? 'Y':'X')+'('+anim+'deg)'})
                                },queue:false}).delay(duration)
                        else if(orizorvert==0 || !$.browser.webkit)
                                $(e).animate({'z-index':$(e).css('z-index')},{duration:duration,step:function(now,fx){
                                        anim = 1-Math.sin(fx.pos*Math.PI)/10
                                        $(e).css({'-webkit-transform' : 'scale('+anim+')',
                                                '-moz-transform' : 'scale('+anim+')',
                                                '-o-transform' : 'scale('+anim+')'})
                                },queue:false}).delay(duration)
                })
        }
})(jQuery)
/*
*    USAGE :
*    $('a').click(function(e){
*               $(this).metroClick( e, callback() )
*              return false
*     })
*
*/

http://claudiobonifazi.com/snippets/metro_click

After giving a try with the Windows 8 Developer Preview i asked myself if i could reproduce the on click effect of the metro UI in a webpage.

Sadly, for what i know at this time CSS3 3d transformations works only on webkit browsers, so this is nothing more than a code exercise with no real job usefulness. Anyway, here it is: if you click on one of the big squared link they tilt in the direction of the nearest border and if you click exactly in the center they perform a reducing effect. If you try it in firefox or opera only the reducing effect works.

EXAMPLE: http://claudiobonifazi.com/snippets/metro_click/

metro.js : a windows8 like onclick effect

jquery

jQuery