Simple 3D Effect Plugin For 3D - smart3d

File Size: 825KB
Views Total: 3744
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple 3D Effect Plugin For 3D - smart3d

smart3d is a jQuery plugin for gluing several elements of your page together into an animated 3D effect. Good for creating animated 3D backgrounds for menu, header, etc.

Basic usage:

1. Include jQuery library and jQuery smart3d plugin on the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.smart3d.js"></script>

2. Markup Html structure

<ul id="demo">
<li><img src="images/1.png" /></li>
<li><img src="images/2.png" /></li>
<li><img src="images/3.png" /></li>
<li><img src="images/4.png" /></li>
<li><img src="images/5.png" /></li>
</ul>

3. Call the plugin

<script type="text/javascript">
$(document).ready(function() {
    $('#demo').smart3d();
});
</script>

4. CSS for this example

#demo {
width: 600px;
height: 450px;
overflow: hidden;
border: 2px solid #444444;
margin: 0;
}
#demo li {
width: 800px;
height: 600px;
}

This awesome jQuery plugin is developed by yeeevhen. For more Advanced Usages, please check the demo page or visit the official website.