Jquery. Fullscreen in alle Richtungen sliden

[aTa]

Hi zusammen,

ich steh grad etwas auf dem Schlauch und zwar möchte ich gerne eine Fullscreenslide Webseite bauen bzw ich muss
Das Problem ist jetzt aber das ich ja vier Divs habe, siehe Anhang. Es scheitert schon drann dass ich das mittlere nicht in den Viewport des Browser bekomme. Hat jemand ne Idee wie ich das am besten umsetze.
Hier mal mein Anfangscode ohne Fullscreen, nur mit dem Slideeffekt.

HTML

<button id="left">?</button>
<button id="bottom">?</button>
<button id="right">?</button>
<div class="block"></div>

CSS

div {
  position:absolute;
  background-color:#000;
  left:50px;
  width:90px;
  height:90px;
  margin:5px;
  top:50px;
}

Jquery

var slideDistance;
var slideSpeed;

//Change this Properties
slideDistance = 200;
slideSpeed = 500;


$("#right").click(function(){
  $(".block").animate({"left": "+=" + slideDistance + "px"}, slideSpeed);
});

$("#left").click(function(){
  $(".block").animate({"left": "-=" + slideDistance + "px"}, slideSpeed);
});

$("#bottom").click(function(){
  $(".block").animate({"top": "+=" + slideDistance + "px"}, slideSpeed);
});

 

[tombe]

Ich verstehe das nicht so ganz. Du schreibst es gibt vier DIVS, im Code sehe ich aber nur einen.

Und wenn der DIV/die DIVs im Fullscreen dargestellt werden sollen: Fullscreen = Vollbild wozu dann mittig platzieren?