'Sliding web page transitions (jQuery)

Although there are similar questions on this site, non seem to quite answer my question...

I have a 5 static page website which looks like the inside of a hair salon. I would like each page transition looking like the user is sliding across (looking around) the salon. This means the content (.content div) needs to slide out, then the next page slide in. If possible, it would be good to be able to add different classes to links to change which way the page and new page slide out/in (ie from right to left or left to right). It should be noted that the navigation bar, logo and footer will not be sliding as they are in the same place on every page.

I have managed to get a fade effect with jQuery:

$(".content").css("display", "none");
$(".content").fadeIn(2000);
$("a.transition").click(function(event) {
    event.preventDefault(); 
    linkLocation = this.href; 
    $(".content").fadeOut(1000, redirectPage); 
});
function redirectPage() {
    window.location = linkLocation;
}

However, this is very clunky in reality, and I would like to be able to slide the pages in a way similar to jQuery easing. I don't want to have a one page website for SEO reasons. I'm not sure if ajax is the answer, but never explored it so have no experience in using it.

Thanks,

Jamie

jqueryajaxslidetransitions


Solution 1:[1]

You can use the panoramic view plugins for jquery: Plugin 1 Plugin 2 Plugin 3 And you can also check: This post on SO

Solution 2:[2]

I don't understand why cannot load everything all together and hide/show them on demand.

Consider about SEO, if the Search Engine robot ignores invisible contents. I don't think loading a new page with Javascript will make it better, I'm not sure, correct me please if I'm wrong.

To make the animation smooth, I think you have to preload the content. No matter how you optimize your pages, it still take time to load them, it's definitely longer than your animation duration and it's also dependent on user's network/device/location...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Community
Solution 2 cn123h

Related Questions