Mac-OSX-Like Animated Folder Efffect

File Size: 49.9 KB
Views Total: 1654
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Mac-OSX-Like Animated Folder Efffect

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="" />
<!-- Our stylesheet -->
<link rel="stylesheet" href="assets/css/styles.css" />


<div id="main">
<div class="folder">
<div class="front"></div>
<div class="back"></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" /> 

3. Include jQuery Library, jQuery UI and script.js

<script src=""></script> 
<script src=""></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.