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

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

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

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

首先建立html，詳細說明可以看原文的介紹。

view plaincopy to clipboardprint

1. <div class="folder">  
2.     <div class="front"></div>  
3.     <div class="back"></div>  
4. </div>  

css部分

view plaincopy to clipboardprint

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.     position: absolute;   
10.     top: 50%;   
11.     left: 50%;   
12.     z-index: 0;   
13.   
14.     width: 160px;   
15.     height: 120px;   
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.35) inset;   
62.   
63.     z-index:10;   
64.   
65.     font: bold 26px sans-serif;   
66.     color: #5A88A9;   
67.     text-align: center;   
68.     text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);   
69.     line-height: 115px;   
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

view plaincopy to clipboardprint

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. });  

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