Advanced Search

metro.js : a windows8 like onclick effect

/ Published in: jQuery
Save to your folder(s)
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/

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*
  2.  *  metro.js - Win8 Metro UI onclick effect [v1.0]
  3.  *  Distributed under the Do-wathever-the-hell-you-want-with-it License
  4.  *
  5.  *  Web site:   http://claudiobonifazi.com
  6.  *  Blog:       http://claudiobonifazi.com?p=4
  7.  *  Email:      claudio.bonifazi@gmail.com
  8.  *  Twitter:    @ClaudioBonifazi
  9.  */
  10.  
  11. (function($){
  12.     $.fn.metroClick = function( e, callback ){
  13.  
  14.                 var el = $(this), origin = 0, ang = 10, orizorvert = 0, duration = 200, anim,
  15.                         mouse = {x:e.pageX-el.offset().left,y:e.pageY-el.offset().top};
  16.  
  17.                 // for a better antialiasing
  18.                 if(el.css('box-shadow')=='none')
  19.                         el.css({'box-shadow':'0 0 1px transparent'})
  20.  
  21.                 // needed to define how much links should tilt
  22.                 el.parent().css({'-webkit-perspective':el.outerWidth()*5})
  23.  
  24.                 //identify mouse position relatively to the clicked box
  25.                 if( mouse.x < el.outerWidth()/3 ){
  26.                         orizorvert = 1          //  left
  27.                         origin = 100
  28.                         ang = -ang
  29.                 }else if(mouse.x > parseInt(el.outerWidth()*2/3)){
  30.                         orizorvert = 1          // right
  31.                 }else{
  32.                         if(mouse.y < el.outerHeight()/3){
  33.                                 orizorvert = 2  // center-top
  34.                                 origin = 100
  35.                         }else if(mouse.y > parseInt(el.outerHeight()*2/3)){
  36.                                 orizorvert = 2  // center-bottom
  37.                                 ang = -ang
  38.                         }
  39.                 }
  40.  
  41.                 return $.each(el,function(i,e){
  42.                         if( orizorvert > 0 && $.browser.webkit)
  43.                                 $(e).css({'-webkit-transform-origin':(orizorvert==1 ? origin+'% 0%' : '0% '+origin+'%')})
  44.                                 .animate({'z-index':$(e).css('z-index')},{duration:duration,step:function(now,fx){
  45.                                         anim = ang*Math.sin((fx.pos*Math.PI))
  46.                                         $(e).css({'-webkit-transform' : 'rotate'+(orizorvert==1 ? 'Y':'X')+'('+anim+'deg)'})
  47.                                 },queue:false}).delay(duration)
  48.                         else if(orizorvert==0 || !$.browser.webkit)
  49.                                 $(e).animate({'z-index':$(e).css('z-index')},{duration:duration,step:function(now,fx){
  50.                                         anim = 1-Math.sin(fx.pos*Math.PI)/10
  51.                                         $(e).css({'-webkit-transform' : 'scale('+anim+')',
  52.                                                 '-moz-transform' : 'scale('+anim+')',
  53.                                                 '-o-transform' : 'scale('+anim+')'})
  54.                                 },queue:false}).delay(duration)
  55.                 })
  56.         }
  57. })(jQuery)
  58. /*
  59. *    USAGE :
  60. *    $('a').click(function(e){
  61. *               $(this).metroClick( e, callback() )
  62. *              return false
  63. *     })
  64. *
  65. */

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.