虽然有类似的问题在这个网站上,非似乎相当回答我的问题...
我有一个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 是答案,但从来没有探索过它,所以没有使用它的经验。
谢谢你,
杰米
2条答案
按热度按时间7kqas0il1#
您可以使用jquery的全景视图插件:Plugin 1Plugin 2Plugin 3您还可以检查:This post on SO
vqlkdk9b2#
我不明白为什么不能加载所有的东西在一起,并隐藏/显示他们的需求。
考虑一下SEO,如果搜索引擎机器人忽略了不可见的内容。我不认为加载一个新的页面与Javascript将使它更好,我不确定,请纠正我,如果我错了。
为了让动画更流畅,我认为你必须预先加载内容。无论你如何优化你的页面,加载它们仍然需要时间,这肯定比你的动画持续时间长,而且还取决于用户的网络/设备/位置...