Question

虽然这个网站上有类似的问题，但似乎没有完全回答我的问题......

我有一个5静态页面网站，看起来像美发沙龙的内部。我希望每个页面转换看起来像用户滑过（环顾四周）沙龙。这意味着内容（.content div）需要滑出，然后下一页滑入。如果可能，最好能够为链接添加不同的类，以改变页面和新页面滑出/进入的方式（即从右到左或从左到右）。应该注意的是导航栏，徽标和页脚不会滑动，因为它们位于每个页面的相同位置。

我已经设法通过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;
}

然而，这在现实中非常笨重，我希望能够以类似于jQuery缓动的方式滑动页面。出于搜索引擎优化的原因，我不想拥有一个单页网站。我不确定ajax是否是答案，但从未进行过探索，因此没有使用它的经验。

谢谢，

杰米

Answer 1

您可以使用jquery的全景视图插件： Plugin 1 Plugin 2 Plugin 3 你也可以检查： This post on SO

Answer 2

我不明白为什么不能将所有内容加载到一起并按需隐藏/显示它们。

如果搜索引擎机器人忽略不可见的内容，请考虑SEO。我不认为使用Javascript加载新页面会让它变得更好，我不确定，如果我错了，请纠正我。

为了使动画流畅，我认为你必须预先加载内容。无论你如何优化你的页面，它仍然需要时间加载它，它肯定比你的动画持续时间长，它也取决于用户的网络/设备/位置...

滑动网页转换（jQuery）

2 个答案: