3

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

Scoobler
  • 9,696
  • 4
  • 36
  • 51
Jamie
  • 31
  • 1
  • 2
  • `easing` is not a transition type. It rather defines how an animated parameter changes through–out the animation period. There's different types of easing, leading to differently looking animations. It does not animate anything "by itself", though. If you don't want to include all sub pages into one single page, you'll have to either AJAX to get the content of each sub page, or add a "slide in" effect with every page load and "slide out" with every page unload. My recommendation is to keep your site as it is and use JS to change the behavior if available, using AJAX to load the sub pages. – polarblau May 29 '11 at 08:54

2 Answers2

0

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

cn123h
  • 2,302
  • 1
  • 21
  • 16
0

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

Community
  • 1
  • 1
Sujit Agarwal
  • 12,348
  • 11
  • 48
  • 79
  • I like the plugin, but the problem is sliding between html pages when a link is clicked; and those parts of the pages aligned to the center of the page. – Jamie May 29 '11 at 10:21