视差“滚动”仅通过导航

Question

由于我还是Javascript / Jquery / HTML5 / CSS3的新手，我想我会向所有经验丰富的程序员提问。

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

网站的布局如下：

 O
OXO
 O

“O”是内容div，“X”是“home”页面（起始点）。如果用户单击屏幕顶部的箭头（从原点），页面将向上滚动。任何其他方向也是如此。我想在背景中创建一张巨型照片，根据他们“滚动”到的特定内容div，使用视差效果来移动它的位置。

我已经绞尽脑汁两天试图弄清楚从哪里开始。任何帮助将不胜感激，如果我需要更具体的东西，请告诉我。谢谢！

Answer 1

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

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

考虑： Scrolling Parallax Plugin for jQuery

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

以下是使用此插件的方法/方法。

1。根据需要使用水平和垂直内容设计您的网站。布局示例：

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.

2. 由于网页访问者会看到不需要的网页顶部，请使用jQuery.scrollTo()插件在页面加载时设置“起始”点。

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

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.

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