สร้างโฟลเดอร์แบบเคลื่อนไหวเหมือน Mac OSX ด้วย CSS3


ได้เอามาแนะนำกันซักที่กับการวิธีการสร้างโฟลเดอร์ให้เหมือน Mac OSX โดยการใช้ css3 และ UI ของ jQuery เข้ามาทำงานร่วมกันโดยรูปแบบการทำงานจะเป็นแบบ 3D โดยการจัดการที่งานเมื่อเรานำเม้าไปลากสิ่งที่เราต้องการเก็บไว้ในงโฟลเดอร์ก็จะจัดเก็บเข้าไปงโฟลเดอร์และสามารถนับจำนวนไฟลืที่อยู่ในนั้นได้เป็นเทคนิคที่ทำให้เราเห็นการสร้างชิ้นงานด้วย css3 และ UI ของ jQuery ที่น่าสนใจอีกด้วย


ตัวอย่างการเรียกใช้งาน index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
< !DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>How to Make a OSX-like Animated Folder with CSS3 | Tutorialzine </title>
        <!-- The jQuery UI Styles -->
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
        <!-- Our stylesheet -->
        <link rel="stylesheet" href="assets/css/styles.css" />
    </head>
    <body>
        <div id="main">
            <div class="folder">
                <div class="front"></div>
                <div class="back"></div>
            </div>
            <img src="assets/48px/box.png" style="top:340px;left:100px;" alt="box" />
            <!-- More icons here .. -->
        </div>
        <!-- JavaScript Includes -->
        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <script src="assets/js/script.js"></script>
    </body>
</html>


ตัวอย่างการเรียกใช้งาน css3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.folder {
    /* This will enable the 3D effect. Decrease this value
     * to make the perspective more pronounced: */

    -webkit-perspective: 800px;
    -moz-perspective: 800px;
    perspective: 800px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 160px;
    height: 120px;
    margin: -100px 0 0 -60px;
}
.folder div{
    width:150px;
    height:115px;
    background-color:#93bad8;
    /* Enabling 3d space for the transforms */
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    /* Enabling a smooth animated transition */
    -webkit-transition:0.5s;
    -moz-transition:0.5s;
    transition:0.5s;
    /* Disable text seleltion on the folder */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    position:absolute;
    top:0;
    left:50%;
    margin-left:-75px;
}
.folder .front{
    border-radius:5px 5px 0 0;
    -moz-transform:rotateX(-30deg);
    -webkit-transform:rotateX(-30deg);
    transform:rotateX(-30deg);
    -moz-transform-origin:50% 100%;
    -webkit-transform-origin:50% 100%;
    transform-origin:50% 100%;
    background-image: -moz-linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);
    background-image: -webkit-linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);
    background-image: linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%);
    box-shadow:0 -2px 2px rgba(0,0,0,0.1), 0 1px rgba(255,255,255,0.35) inset;
    z-index:10;
    font: bold 26px sans-serif;
    color: #5A88A9;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
    line-height: 115px;
}


ตัวอย่าง css ในการกำหนดสีต่างในการทำงาน เช่น พื้นหลัง

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.folder .back{
    background-image: -webkit-linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);
    background-image: -moz-linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);
    background-image: linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%);
    border-radius:0 5px 0 0;
    box-shadow:0 -1px 1px rgba(0,0,0,0.15);
}
/* The top part */
.folder .back:before{
    content:'';
    width:60px;
    height:10px;
    border-radius:4px 4px 0 0;
    background-color:#93bad8;
    position:absolute;
    top:-10px;
    left:0px;
    box-shadow:0 -1px 1px rgba(0,0,0,0.15);
}
/* The shadow */
.folder .back:after{
    content:'';
    width:100%;
    height:4px;
    border-radius:5px;
    position:absolute;
    bottom:5px;
    left:0px;
    box-shadow:0 4px 8px #333;
}


ตัวอย่างโค้ด UI jQurey ที่ใช้ในการทำงานในส่วนของหารลากวางไฟล์เข้าไปในโฟเดอร์

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(function() {
    var folder = $("#main .folder"),
        front = folder.find('.front'),
        img = $("#main img"),
        droppedCount = 0;
    img.draggable();
    folder.droppable({
        drop : function(event, ui) {
            // Remove the dragged icon
            ui.draggable.remove();
            // update the counters
            front.text(++droppedCount);
        },
        activate : function(){
            // When the user starts draggin an icon
            folder.addClass('open');
        },
        deactivate : function(){
            // Close the folder
            folder.removeClass('open');
        }
    });
});

ดาวน์โหลดโค้ด…..!!!



ขอบคุณข้อมูลจาก tutorialzine

Comments

comments

Powered by Facebook Comments