Mac-OSX-Like Animated Folder Efffect
File Size: | 49.9 KB |
---|---|
Views Total: | 1682 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Mac-OSX-Like Animated Folder Efffect using CSS3 3D transforms, gradients and box shadows.
How to Use It:
1. CSS
<!-- 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" />
2. HTML
<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" /> <img src="assets/48px/calculator.png" style="top:340px;left:170px;" alt="calculator" /> <img src="assets/48px/clipboard.png" style="top:340px;left:240px;" alt="clipboard" /> <img src="assets/48px/console.png" style="top:340px;left:310px;" alt="console" /> <img src="assets/48px/basketball.png" style="top:340px;left:380px;" alt="basketball" /> <img src="assets/48px/facebook.png" style="top:400px;left:100px;" alt="facebook" /> <img src="assets/48px/gift.png" style="top:400px;left:170px;" alt="gift" /> <img src="assets/48px/id_card.png" style="top:400px;left:240px;" alt="id card" /> <img src="assets/48px/imac.png" style="top:400px;left:310px;" alt="imac" /> <img src="assets/48px/system_monitoring.png" style="top:400px;left:380px;" alt="system monitoring" /> </div>
3. Include jQuery Library, jQuery UI and script.js
<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>
This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.