jQuery.Smart3D

February 2nd, 2011 |

Interesting effects, which can be used on site-header. It’s very simple to use: several layers glued together into a 3D effect. See examples of using this jQuery plugin!

Demo preview

Plugn options

frameWidth (integer) (optional)
Width. You can set in CSS.

frameHeight (integer) (optional)
Height. You can set in CSS.

horizontal (boolean) (optional)
Default: true

vertical (boolean) (optional)
Default: true

firstStatic (boolean) (optional)
Default: false

lastStatic (boolean) (optional)
Default: false

invertHorizontal (boolean) (optional)
Default: false

invertVertical (boolean) (optional)
Default: false

Example:

$(function() {
    $('#mindscape').smart3d(); 
});
<ul id="mindscape">
    <li><img src=".../mindscape1.png" /></li>
    <li><img src=".../mindscape2.png" /></li>
</ul>
#mindscape {
    width: 720px;
    height: 170px;
    overflow: hidden;
    border:2px solid #444444;
}
#mindscape li{
    width: 844px;
    height: 170px;
}

Go to

Time: 0.00107 sec.

Memory: 266.7 kb