Building a "single page" site with animation between pages

Question

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 :)

Answer 1

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 ..

Answer 2

There are many ways to achieve what you wish, but this is my suggestion on how to go about it conceptually:

1. Animate the content by animating the position of your content container, that should give a nice smooth feeling to your page. The jQuery documentation should be pretty clear on that. Remember that you want to intercept the normal behaviour of the anchor, so either preventDefault() or return false, or both.

2. Get your content using an AJAX request. You can use the href attribute that you put in your link in order to fetch the correct content. Then bind an event to that <a> element with a the .on() method. The reason why you leave the href is to have a graceful fallback: should something go wrong with the code, should the user have javascript disabled, or simply navigating on a non-javascript friendly browser, he will still be able to access your content.

These are the two essential steps to achieve what you are looking for. If you want to fine tune your site a bit more, try to think about those things as well:

1. Make your website look more responsive by the cautious use of loading .gifs.

2. Don't double serve content: check whether the user is clicking to the link of the currently displaying page and don't fetch the content again; besides looking silly to your user, it will make a useless server load (probably insignificant, but still). Always consider your user, though! Tell him that that link is disabled by clever use of UI.

3. Manipulate browser history: using the history API. Your site will be more accessible, more user-friendly, more SEO-friendly, and will also look much more advanced.