2013年5月12日 星期日

使用 jquery UI 和 CSS3 建立仿 Mac 資料夾風格的拖曳動畫

mac folder

今天看到的很酷的範例,可以先看Demo

這是結合jquery UI和CSS3,在拖曳效果上增加動畫的示範,試著把檔案拖曳到資料夾,會有很酷的動畫。

說明及plugin下載
How to Make a Mac OSX-like Animated Folder with CSS3

首先建立html,詳細說明可以看原文的介紹。
  1. <div class="folder">  
  2.     <div class="front"></div>  
  3.     <div class="back"></div>  
  4. </div>  

css部分
  1. .folder {   
  2.     /* This will enable the 3D effect. Decrease this value  
  3.      * to make the perspective more pronounced: */  
  4.   
  5.     -webkit-perspective: 800px;   
  6.     -moz-perspective: 800px;   
  7.     perspective: 800px;   
  8.   
  9.     positionabsolute;   
  10.     top: 50%;   
  11.     left: 50%;   
  12.     z-index0;   
  13.   
  14.     width160px;   
  15.     height120px;   
  16.     margin-100px 0 0 -60px;   
  17. }   
  18.   
  19. .folder div{   
  20.     width:150px;   
  21.     height:115px;   
  22.   
  23.     background-color:#93bad8;   
  24.   
  25.     /* Enabling 3d space for the transforms */  
  26.     -webkit-transform-style: preserve-3d;   
  27.     -moz-transform-style: preserve-3d;   
  28.     transform-style: preserve-3d;   
  29.   
  30.     /* Enabling a smooth animated transition */  
  31.     -webkit-transition:0.5s;   
  32.     -moz-transition:0.5s;   
  33.     transition:0.5s;   
  34.   
  35.     /* Disable text seleltion on the folder */  
  36.     -webkit-user-select: none;   
  37.     -moz-user-select: none;   
  38.     user-select: none;   
  39.   
  40.     position:absolute;   
  41.     top:0;   
  42.     left:50%;   
  43.     margin-left:-75px;   
  44. }   
  45.   
  46. .folder .front{   
  47.     border-radius:5px 5px 0 0;   
  48.   
  49.     -moz-transform:rotateX(-30deg);   
  50.     -webkit-transform:rotateX(-30deg);   
  51.     transform:rotateX(-30deg);   
  52.   
  53.     -moz-transform-origin:50% 100%;   
  54.     -webkit-transform-origin:50% 100%;   
  55.     transform-origin:50% 100%;   
  56.   
  57.     background-image: -moz-linear-gradient(top#93bad8 0%, #6c9dc0 85%, #628faf 100%);   
  58.     background-image: -webkit-linear-gradient(top#93bad8 0%, #6c9dc0 85%, #628faf 100%);   
  59.     background-image: linear-gradient(top#93bad8 0%, #6c9dc0 85%, #628faf 100%);   
  60.   
  61.     box-shadow:0 -2px 2px rgba(0,0,0,0.1), 0 1px rgba(255,255,255,0.35inset;   
  62.   
  63.     z-index:10;   
  64.   
  65.     fontbold 26px sans-serif;   
  66.     color#5A88A9;   
  67.     text-aligncenter;   
  68.     text-shadow1px 1px 1px rgba(2552552550.1);   
  69.     line-height115px;   
  70. }   
  71.   
  72. .folder .back{   
  73.     background-image: -webkit-linear-gradient(top#93bad8 0%, #89afcc 10%#5985a5 60%);   
  74.     background-image: -moz-linear-gradient(top#93bad8 0%, #89afcc 10%#5985a5 60%);   
  75.     background-image: linear-gradient(top#93bad8 0%, #89afcc 10%#5985a5 60%);   
  76.   
  77.     border-radius:0 5px 0 0;   
  78.     box-shadow:0 -1px 1px rgba(0,0,0,0.15);   
  79. }   
  80.   
  81. /* The top part */  
  82. .folder .back:before{   
  83.     content:'';   
  84.     width:60px;   
  85.     height:10px;   
  86.     border-radius:4px 4px 0 0;   
  87.     background-color:#93bad8;   
  88.     position:absolute;   
  89.     top:-10px;   
  90.     left:0px;   
  91.     box-shadow:0 -1px 1px rgba(0,0,0,0.15);   
  92. }   
  93.   
  94. /* The shadow */  
  95. .folder .back:after{   
  96.     content:'';   
  97.     width:100%;   
  98.     height:4px;   
  99.     border-radius:5px;   
  100.     position:absolute;   
  101.     bottom:5px;   
  102.     left:0px;   
  103.     box-shadow:0 4px 8px #333;   
  104. }   
  105.   
  106. .folder.open .front{   
  107.     -moz-transform:rotateX(-50deg);   
  108.     -webkit-transform:rotateX(-50deg);   
  109.     transform:rotateX(-50deg);   
  110. }  

最後寫js,記得這之前要引入jquery跟jquery UI
  1. $(function() {   
  2.   
  3.     var folder = $("#main .folder"),   
  4.         front = folder.find('.front'),   
  5.         img = $("#main img"),   
  6.         droppedCount = 0;   
  7.   
  8.     img.draggable();   
  9.   
  10.     folder.droppable({   
  11.         drop : function(event, ui) {   
  12.   
  13.             // Remove the dragged icon   
  14.             ui.draggable.remove();   
  15.   
  16.             // update the counters   
  17.             front.text(++droppedCount);   
  18.   
  19.         },   
  20.   
  21.         activate : function(){   
  22.             // When the user starts draggin an icon   
  23.             folder.addClass('open');   
  24.         },   
  25.   
  26.         deactivate : function(){   
  27.             // Close the folder   
  28.             folder.removeClass('open');   
  29.         }   
  30.     });   
  31. });  

看不懂程式的話,直接把圖片換掉也是可以使用。
反應:

0 意見:

Related Posts Plugin for WordPress, Blogger...