Imagine you have a sliding door, one left and one right. In order to open/close this particular door, we have to pull or push both door so that it will open or close completely. This is the usual case for a door to open and close which required two image of door left and right. How can this be done? The concept behind this technique is not similar to the zoom tutorial i did previously. But let’s just concentrate on what is a viewport. A viewport is just a viewable area on the screen to the user, anything outside the viewport is considered unseen by the user. Using viewport, we will try to hide the two sliding door left and right outside the viewport and when the user clicks on the image, the door will automatically be called in and closed the door to create a nicely done closed door effect. The opening door effect will be exactly the same with the additional step to open the door after the door is closed.

CSS and HTML

I believe the CSS and HTML structure should be the same as the shuffle effect tutorial i wrote previously.

Coding

The coding part may get a bit confusing for the viewport technique. But i will try my best to cover it with simplicity as much as i can. If there is any doubt you may have you can really comment below and i will try to reply you within the day if possible. On the CSS Coding,

body{
margin: 0 auto;                    /*align the header at the center*/
text-align: center;                /*align the header at the center*/
}
div.image
{
width: 600px;                    /* width of each container*/
height: 350px;                    /* height of each container*/
position: absolute;                /* instructure each container to obey the position absolutely*/
float: left;                    /* float all the container so that they overlapped each other*/
left: 27%;                        /* align them to the center of the screen */
z-index: -1;
}
div#box1
{
background: #66A666 url('../images/blue.png');
}
div#box2
{
background: #E37373 url('../images/green.png');
}
div#box3
{
background: #B2B2B2 url('../images/orange.png');
}
div#box4
{
background: #A51515 url('../images/red.png');
}

Notice that everything above are images and if images are not displayed yet, a color will be shown instead. Other important stuff are self explained on the comment i wrote in the code. For the HTML structure,

<div class='image' id='box1'></div>
<div class='image' id='box2'></div>
<div class='image' id='box3'></div>
<div class='image' id='box4'></div>

There will only be the container in the HTML structure similar to the shuffle effect tutorial. Supposely, it should have more than just 4 block of div as we need a viewport for each container. But for simplicity, i will just write 4 block here and leave all the complex stuff with jQuery. On the jQuery side,

//below here preload the image in the simplest form
$(function(){
for(i = 1; i < 5;i++)
{
var img = new Image();
img.src = 'images/images/d_left_'+i+'.png';
$(img).load();
}
var i = -1; //deep of the image
var no = 0; //image number
//attach event handler on each container/image
$('div.image').click(function(){
var Obj = $(this);
no++;
if(no > 4)
no = 1;
// viewport structure
Obj.wrap('
<div id='viewport'></div>
');
Obj.css({left: 0+'px'});
$('#viewport').css('overflow','hidden');
$('#viewport').width(Obj.width());
$('#viewport').height(Obj.height());
$('#viewport').css('left','27%');
$('#viewport').css('position','absolute');
// left door structure
$('#viewport').append('
<div class='GrpEffectDiv' id='doorLeft'/>');
$('#doorLeft').css('position', 'absolute');
$('#doorLeft').css('background', '#000 url('images/images/d_left_'+no+'.png')');
$('#doorLeft').width(Obj.width()/2);
$('#doorLeft').height(Obj.height());
$('#doorLeft').css('left', '-'+300+'px');
//right door structure
$('#viewport').append('
<div class='GrpEffectDiv' id='doorRight'/>');
$('#doorRight').css('position', 'absolute');
$('#doorRight').css('background', '#000 url('images/images/d_right_'+no+'.png')');
$('#doorRight').width(Obj.width()/2);
$('#doorRight').height(Obj.height());
$('#doorRight').css('left', 600+'px');
// left door animation
$('#doorLeft')
.animate({left: 0+'px'},1000,
function(){
Obj.css('z-index', i);
$(this).remove();
});
//right door animation
$('#doorRight')
.animate({left: 300+'px'},1000,
function(){
$(this).remove();
Obj.css({left: '27%'});
$('#viewport').replaceWith(Obj);
});
i--;
});
})

Seriously, looking at the code i am starting to wonder whether i will be able to explain it in a simple term.  Anyway, what the above code done is as follow,

1. create a viewport around the container and became the parent of the container
2. create the left door and append into the viewport ( doors became neightbour of the container)
3. create the right door and append into the viewport
4. animate both left and right door to close the door
5. remove both door and subsituate the viewport back to the container with the original settings

I have also commented the code above so that you are clear what i am doing on the code itself. So how does the viewport be created by the code above? If you have read my sliding tutorial previously,  it is similar to the frame concept, where there is a frame (viewport) to cover the outside of the viewport. If i remove the most important thing for the viewport to work which is

$('#viewport').css('overflow','hidden');

You will see that the left and right box is standing by on the right and left side ready to charge at the container to close the door.

The article source:http://hungred.com/how-to/tutorial-how-make-your-opening-closing-door-effect-jquery/