Javascript 视差；滚动；只能通过导航

因为我还是Javascript/Jquery/HTML5/CSS3新手，所以我想我应该向所有更有经验的程序员提一个问题

我被困在程序逻辑的开头。我想做一个具有视差“滚动”效果的网站，但是这种效果应该只有当用户点击屏幕边缘的导航按钮时才会发生

网站的布局如下所示：

 O
OXO
 O

“O”是内容div，“X”是“主页”（原点）。如果用户单击屏幕顶部的箭头（从原点），页面将向上滚动。其他任何方向也是如此。我想要一张巨大的背景照片，利用视差效应，根据他们“滚动”到的特定内容div改变其位置

---

我绞尽脑汁想了两天，想知道从哪里开始。任何帮助都将不胜感激，如果我需要更具体的信息，请告诉我。谢谢大家!

>主页内容处于视差经验的中间。

因此，您需要一个视差插件，它可以处理垂直和水平视差效果，以便在您的网页中进行正确的导航

考虑：

上面的视差演示页面允许您向两个方向滚动

下面是我使用这个插件的方法。

1.根据需要设计横向和纵向内容的网站。布局示例：

2.由于网页访问者将看到不需要的网页顶部，请使用

jQuery.scrollTo（）

插件设置页面加载的“起点”

3.使用一个插件或方法，该插件或方法允许在每个视口侧的4个透明箭头“div”处于“固定”位置。当用鼠标点击（或悬停）时，这将模拟滚动条的移动，视差网页插件将做出相应的反应。布局示例（注意外部导航是半透明的）：

---

网页最困难的部分是要有足够的“填充内容”，占据“起点”的顶部和侧面。但是，如果“填充内容”是一个缩略图库，那么这个特定的视差页面将看起来非常漂亮（而且不同寻常！）。

您是否看过并考虑过各种基于JavaScript或jQuery的页面？我会从一个符合你需要的视差引擎开始。例如，允许水平视差效果。谢谢你的回答。是的，我看过很多视差插件，因为我或多或少想在Jquery中这样做，因为我的内容的其他部分将使用Jquery。那些插件并没有完成我需要做的事情，或者我不知道如何实现它们来完成我需要做的事情。太棒了！你激发了我的灵感，现在我想我知道从哪里开始了。子问题：如何将我使用的视差插件绑定到onClick事件而不是滚动事件？我需要挖掘所有的库代码并替换卷轴事件吗？让我们后退一步，DIS把<代码> > ScRoTo（）/<代码>作为选择。O和“起点”X应该是所有单独的网页，而不是div容器。这一点非常重要，因此无论浏览器窗口的大小，“起点”X都会占据浏览器视口。只有单击导航箭头（向上、向下、向左或向右）时，“新页面”（也称为“O”内容页）才会滚动到视图中。由于每个网页都是使用视差方法创建的，因此所有动画都会自动出现。在这种情况下，滚动脚本是这是更好的实际上。。。特别是因为我想做的是禁用用户滚动（通过鼠标滚轮、滚动条和/或触摸板），并且只将“滚动”移动绑定到导航按钮SHY arttronics！jQuery Ascensor插件使用divs和scrollTo（）。。。如何使用另一种方法加载单独的网页？将每个div配置为使用完整的iframe。请记住，iFrame对域和某些网站遵循相同的源策略规则。。。即使是www.google.com也不允许使用iFrame。参考文献

OOO     Here, the top of the webpage is content about the "starting" point.
OXO     Next, you have content on the sides of the "starting" point as shown.
OOO     Finally, content is below the "starting" point to complete the webpage.

UUUUU     Webpage top-content is here plus the overlay arrow for UP Navigation.
LOOOR     LEFT and RIGHT Navigation arrows are seen on top of more "top" content.
LOXOR     The center starting point will show the "fixed" Navigation arrows.
LOOOR     LEFT and RIGHT Navigation arrows are seen below the "starting" point.
DDDDD     Bottom-content is here plus the overlay arrow for DOWN Navigation.