滑动网页转换(jQuery)

hfyxw5xn  于 2022-12-18  发布在  jQuery
关注(0)|答案(2)|浏览(132)

虽然有类似的问题在这个网站上,非似乎相当回答我的问题...
我有一个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 是答案,但从来没有探索过它,所以没有使用它的经验。
谢谢你,
杰米

7kqas0il

7kqas0il1#

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

vqlkdk9b

vqlkdk9b2#

我不明白为什么不能加载所有的东西在一起,并隐藏/显示他们的需求。
考虑一下SEO,如果搜索引擎机器人忽略了不可见的内容。我不认为加载一个新的页面与Javascript将使它更好,我不确定,请纠正我,如果我错了。
为了让动画更流畅,我认为你必须预先加载内容。无论你如何优化你的页面,加载它们仍然需要时间,这肯定比你的动画持续时间长,而且还取决于用户的网络/设备/位置...

相关问题