Wednesday, March 20, 2013

We can create 3D object very easily using CSS3 3D transforms. We can create more amazing UI components using these 3D transforms. To show who this work I create this plug-in using jquery and css3. The idea is so simple we will put three images. The middle image always little zoomed. Remaining two will be shown as they are in 3D space. See the demo below.

Please note this will only work in CSS3 support browser.
To create this I used
1)Jquery
2)CSS3
3)prefixfree.js(To get rid of browser prefix)
4)Jquery Boilerplate.(For jquery plugin)

How to Use it
<ul class="ss">
    <li><img src="img/1.jpg" /></li>
    <li><img src="img/2.jpg" /></li>
    <li><img src="img/3.jpg" /></li>
    <li><img src="img/1.jpg" /></li>
    <li><img src="img/2.jpg" /></li>
    <li><img src="img/3.jpg" /></li>
</ul>
You can change class name to what ever you want and add your image links inside li.
Initialize plug-in
$(".ss").Slider3D();
CSS
#ss-wrap{
perspective: 800;
width: 800px;
height: 300px;
overflow: hidden;
width: 1000px;
height: 350px;
}
ul.ss {
list-style-type: none;
width: 1800px;
}
ul.ss li:hover{
  cursor: pointer;
}
ul.ss li img{
  width: 100%;
height: 100%;
}
nav {
width: 58px;
position: absolute;
z-index: 1000;
top: 326px;
left: 50%;
margin-left: -29px;
}
nav span {
text-indent: -9000px;
float: left;
cursor: pointer;
width: 24px;
height: 25px;
opacity: 0.8;
background: transparent url(img/arrows.png) no-repeat top left;
}
nav span.next {
background-position: top right;
margin-left: 10px;
}
nav span:hover {
opacity: 1;
}
Slider3D.js
/*
*  Project:3D slider Plugin using css3 and jquery
*   Website: www.techumber.com
*  Description:3D slide Show Plugin using css3 and jquery
*  Author:Aravind buddha
*
* Copyright 2013, Techumber.com
* Free to use under the MIT license.
*
* Date: TUS March 19 2013
*/
;(function ( $, window, document, undefined ) {
var pluginName = "Slider3D",
    defaults = {
        current: "0",
        auto: false,
        speed: 3000
    };

function Plugin( element, options ) {
    this.element = element;
    this.options = $.extend( {}, defaults, options );
    this._defaults = defaults;
    this._name = pluginName;
    this._swrap="";
    this._next="";
    this._prev="";
    this._current="";
    this._cindex="";
    this._max="";
    this.list="";
    this.init();
}
//Actual plugin starts
Plugin.prototype = {
    init: function() {
         var self=this;
       _swrap=$(this.element).wrap('<div class="ss-wrap" />').parent();
       _swrap.append('<nav><span class="prev">&lt;</span><span class="next">&gt;</span></nav>');
       _swrap.css({
                'perspective': '800',
                'width': '800px',
                'height': '300px',
                'overflow': 'hidden',
                'width': '1000px',
                'height': '350px'
            });
       list=_swrap.find('li').toArray();
       _max=list.length;
       $(list).css({'opacity':'0',
       'float': 'left',
        'width': '227px',
        'height': '267px',
        'padding': '10px',
        'paddingTop': '45px',
        'position': 'absolute',
        'transition': 'all 4s'            
       });
       $(list[this.options.current]).addClass("current");
       _current=_swrap.find(".current");
       var index=_current.index();
       self.go(index);
        _next=_swrap.find(".next");
        _prev=_swrap.find(".prev");
        _next.click(function(){
        if(index >= _max-1)
        {
            index=-1;
        }
        self.go(++index);
        });
        _prev.click(function(){
            if(index <=0)
                index=_max;
            self.go(--index);
        });
        //if auto slider enabled
        if(this.options.auto == true)
        {
            setInterval(function(){
            if(index >= _max-1)
            {
                index=-1;
            }
            self.go(++index);},this.options.speed);
        }
    },
    setCurrent:function(i){
    $(list[i]).css({'opacity':'1',
                    'paddingTop': '0',
                    'width': '493px',
                    'height': '313px',
                    'left': '245px',
                    'transform': 'rotateY(0deg) translateZ(0px)',
                    'z-index':"99"
                }).addClass("current");
    },
    setPrev:function(i){
    $(list[i]).css({'opacity':'1',
                    'left': '0',
                    'width': '227px',
                    'height':'267px',
                    'paddingTop': '45px',
                    'z-index':"98",
                    'transform': 'rotateY(-35deg) translateZ(-68px)'
                });
    },
    setNext:function(i){
    $(list[i]).css({'opacity':'1',
                    'transform': 'rotateY(35deg) translateZ(-68px)',
                    'width': '227px',
                    'height':'267px',
                    'paddingTop': '45px',
                    'z-index':"97",
                    'left': '755px'
                });
    },
    setNextNext:function(i){
     $(list[i]).css({'opacity':'0',
                    'transform': 'rotateY(35deg) translateZ(-68px)',
                    'width': '227px',
                    'height':'267px',
                    'paddingTop': '45px',
                    'z-index':"96",
                    'left': '755px'
                });
    },
    setPrevPrev:function(i){
     $(list[i]).css({'opacity':'0',
                    'left': '0',
                    'width': '227px',
                    'height':'267px',
                    'paddingTop': '45px',
                    'z-index':"95",
                    'transform': 'rotateY(-35deg) translateZ(-68px)'
                });
    },
    go: function(i) {
    var self=this;
    if(i==0){
        self.setPrevPrev(_max-2);
        self.setPrev(_max-1);
        self.setCurrent(0);
        self.setNext(1);
        self.setNextNext(2);
    }
    else if(i == _max-1){
        self.setPrevPrev(_max-3);
        self.setPrev(_max-2);
        self.setCurrent(_max-1);
        self.setNext(0);
        self.setNextNext(1);
    }
    else{
        self.setPrevPrev(i-2);
        if(i==1)
            self.setPrevPrev(_max-1);
        self.setPrev(i-1);
        self.setCurrent(i);
        self.setNext(i+1);
        self.setNextNext(i+2);
    }
    },
};
// A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[pluginName] = function ( options ) {
    return this.each(function () {
        if (!$.data(this, "plugin_" + pluginName)) {
            $.data(this, "plugin_" + pluginName, new Plugin( this, options ));
        }
    });
};
})( jQuery, window, document ); 
That's it hope you love it.

4 comments :

  1. it does not work on my pc from demo view :( ?!

    ReplyDelete
    Replies
    1. Which browser you using. Please use any css3 support browser(www.google.com/chrome/)

      Delete
  2. The display is different in mozilla

    ReplyDelete
  3. This display is different in mozilla

    ReplyDelete