How is this effect achieved

Hey,
I’m starting work on a small site for a friend and noticed an effect on the following site:

which I rather like and thought I might use it on the site i’m about to work on.

If you click any of the 3 navbar buttons: Converts, Get CSS or Learn at the top right of that site, the actual window content below slides left and right in and out of view.

How is this effect achieved?

I see that hovering over each link shows that it looks like it’s pointing to an id marker at points in the page, am i correct here?

and thats where it starts pulling content in?

If that is how it gets it’s content, how could I get the same effect but where each pages content is a different file and is not all held in one single file?

yes, each tab points to an element whose id = the value next to the # in the url

One way is to use javascript

Here’s an example I had “prepared earlier” :smiley:

It’s not exactly the same effect but the principle is similar.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<style type="text/css"> 
 
#main { 
overflow: hidden; 
border: 1px solid black; 
color: black; 
text-align: center; 
position: absolute; top: 30px; left: 50px; 
background-color: white; 
width: 200px; 
height: 200px} 
 
#div0 {   
position: absolute; top: 300px; left: 10px; 
color: white; 
background-color: black; 
width: 200px; 
height: 200px} 
 
#div1 {   
position: absolute; top: 300px; left: 300px; 
background-color: green; 
width: 200px; 
height: 200px} 
 
#div2 {    
position: absolute; top: 50px; left: 300px; 
background-color: red; 
width: 200px; 
height: 200px} 
 
#div3 {    
position: absolute; top: 300px; left: 600px; 
background-color: blue; 
width: 200px; 
height: 200px} 
#btnContainer { 
position: absolute; top: 250px; left: 10px} 
 
</style> 
<script type="text/javascript"> 
 
var curDiv = 0; 
var divSlide; 
var divId; 
var curLeft = -200; 
var zedIndex = 0; 
var pauser; 
 
function swapDiv(dir) {
    divId = "div"+curDiv; 
    zedIndex = zedIndex + 100; 
    curLeft = curLeft * dir;
    document.getElementById(divId).style.top = 0+"px"; 
    divSlide = setInterval(function() {slideDiv(dir)},30); 
} 
 
function slideDiv(dir) {   
    document.getElementById(divId).style.zIndex = zedIndex; //this line has to be here and not in swapDiv() to eliminate flickering during 2nd loop through 
    curLeft = curLeft + (1*dir);  
    if(dir == 1 && curLeft > 0)   {  //we have scrolled all the way to the right 
     clearInterval(divSlide); 
     clearTimeout(pauser); 
     curDiv = curDiv + 1; 
     if(curDiv > 3) curDiv = 0; 
     curLeft = -200 * dir; 
     pauser = setTimeout(function() {swapDiv(dir)},2000);
    } else if (dir == -1 && curLeft < 0) { //we have scrolled all the way to the left
      clearInterval(divSlide); 
      clearTimeout(pauser); 
      curDiv = curDiv + 1; 
      if(curDiv > 3) curDiv = 0; 
      curLeft = 200 * dir; 
      pauser = setTimeout(function() {swapDiv(dir)},2000);
    } else {  //keep scrolling to the right 
        document.getElementById(divId).style.left = curLeft+"px";   
    } 
}
 
function stopSliding(btn) {
    if(btn == "stop") {
        document.getElementById("l2r").disabled = false;
        document.getElementById("r2l").disabled = false;
        curLeft = -200;
    } else {  
        document.getElementById("l2r").disabled = true;
        document.getElementById("r2l").disabled = true;
    }
    clearInterval(divSlide); 
    clearTimeout(pauser);
}   
 
</script> 
</head> 
<body> 
 
<div id="main"> 
    <div id="div0">This is Div 1</div> 
    <div id="div1">This is Div 2</div> 
    <div id="div2">This is Div 3</div> 
    <div id="div3">This is Div 4</div> 
</div>
 
<div id="btnContainer"> 
    <button id="l2r" onclick="stopSliding(this.id);swapDiv(1);">Slide Left 2 Right</button>
    <button onclick="stopSliding('stop');">Stop Sliding</button>
    <button id="r2l" onclick="stopSliding(this.id);swapDiv(-1);">Slide Right 2 left</button> 
</div> 
 
</body> 
</html> 

The above can be modified to get the same effect as in your example link.

I think your best option is jQuery. It’s light and doesn’t effect your page and loading time to much. There are quite some sliders on the market, some better than others. Here are just 2 examples, but there way more :