Posted By

claudiowebdesign on 10/02/11


Tagged

jquery ui windows8 metro


Versions (?)

metro.js : a windows8 like onclick effect


 / Published in: jQuery
 

URL: 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/

  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.  * Twitter: @ClaudioBonifazi
  8.  */
  9.  
  10. (function($){
  11. $.fn.metroClick = function( e, callback ){
  12.  
  13. var el = $(this), origin = 0, ang = 10, orizorvert = 0, duration = 200, anim,
  14. mouse = {x:e.pageX-el.offset().left,y:e.pageY-el.offset().top};
  15.  
  16. // for a better antialiasing
  17. if(el.css('box-shadow')=='none')
  18. el.css({'box-shadow':'0 0 1px transparent'})
  19.  
  20. // needed to define how much links should tilt
  21. el.parent().css({'-webkit-perspective':el.outerWidth()*5})
  22.  
  23. //identify mouse position relatively to the clicked box
  24. if( mouse.x < el.outerWidth()/3 ){
  25. orizorvert = 1 // left
  26. origin = 100
  27. ang = -ang
  28. }else if(mouse.x > parseInt(el.outerWidth()*2/3)){
  29. orizorvert = 1 // right
  30. }else{
  31. if(mouse.y < el.outerHeight()/3){
  32. orizorvert = 2 // center-top
  33. origin = 100
  34. }else if(mouse.y > parseInt(el.outerHeight()*2/3)){
  35. orizorvert = 2 // center-bottom
  36. ang = -ang
  37. }
  38. }
  39.  
  40. return $.each(el,function(i,e){
  41. if( orizorvert > 0 && $.browser.webkit)
  42. $(e).css({'-webkit-transform-origin':(orizorvert==1 ? origin+'% 0%' : '0% '+origin+'%')})
  43. .animate({'z-index':$(e).css('z-index')},{duration:duration,step:function(now,fx){
  44. anim = ang*Math.sin((fx.pos*Math.PI))
  45. $(e).css({'-webkit-transform' : 'rotate'+(orizorvert==1 ? 'Y':'X')+'('+anim+'deg)'})
  46. },queue:false}).delay(duration)
  47. else if(orizorvert==0 || !$.browser.webkit)
  48. $(e).animate({'z-index':$(e).css('z-index')},{duration:duration,step:function(now,fx){
  49. anim = 1-Math.sin(fx.pos*Math.PI)/10
  50. $(e).css({'-webkit-transform' : 'scale('+anim+')',
  51. '-moz-transform' : 'scale('+anim+')',
  52. '-o-transform' : 'scale('+anim+')'})
  53. },queue:false}).delay(duration)
  54. })
  55. }
  56. })(jQuery)
  57. /*
  58. * USAGE :
  59. * $('a').click(function(e){
  60. * $(this).metroClick( e, callback() )
  61. * return false
  62. * })
  63. *
  64. */

Report this snippet  

You need to login to post a comment.