Building a "single page" site with animation between pages

I would love to know what is used to have an effect such as this website template: http://www.templatemonster.com/demo/43491.html

I would like to have a single menu and background while once I click on the menu link it triggers the new page to slide into view without being redirected to a new page causing the browser to reload the new page, etc. Something smooth and nice.

I'm not looking for code (other than the functions to use (if JQuery)) and what effects should I be looking for to make this possible?

Just point me in the right direction :)

Solution

now there can be tons of ways .. the easy way (but it's not much of a maintainable way )

is to all your website content in one page and wrap every section that you consider a page in a div like so

<div class="home-page">content of home page goes here </div>
<div class="contact-us-page">content of contact us  page goes here </div>

etc...

and with jquery hide them all except the home page

$(function(){
   $('.contact-us-page').hide();
   $('.other-page').hide();
})

and when the user clicks on the link to other page let's say the contact us page you will hide the parent and slide the contact us page instead

$('.contact-us-link').click(function(){
    $('.home-page').hide(1000);
    $('.contact-us-page').show(1000);
})

and thats it :)

the down fall of this is that there will be no routing ..

so to solve this you have to use something like backbone.js which takes a while to know it well ...

this is just a quick idea on how this works ..