Tuesday, February 14, 2012

jQuery.Smart3D


jQuery.Smart3D

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:

1
2
3
$(function() {
    $('#mindscape').smart3d();
});
1
2
3
4
<ul id="mindscape">
    <li><img src=".../mindscape1.png" /></li>
    <li><img src=".../mindscape2.png" /></li>
</ul>
01
02
03
04
05
06
07
08
09
10
#mindscape {
    width: 720px;
    height: 170px;
    overflow: hidden;
    border:2px solid #444444;
}
#mindscape li{
    width: 844px;
    height: 170px;
}

Go to