由于我对 Javascript/Jquery/HTML5/CSS3 还很陌生，所以我想向所有更有经验的程序员问一个问题。
我有点卡在程序逻辑的开头。我想做一个具有视差“滚动”效果的网站，但是只有当用户单击屏幕边缘的导航按钮时才会发生该效果。
网站的布局将是这样的:
O
OXO
O
“O”是内容 div，“X”是“主页”页面(起点)。如果用户单击屏幕顶部的箭头(从原点开始)，页面将向上滚动。对于任何其他方向也是如此。我想要一张背景中的巨幅照片，使用视差效果根据它们“滚动”到的特定内容 div 来改变其位置。
我绞尽脑汁想了两天，试图找出从哪里开始。任何帮助将不胜感激，如果我需要更具体的说明，请告诉我。谢谢!
最佳答案
主页内容位于视差体验的中间。
因此，您需要一个可以处理垂直和水平视差效果的视差插件，以便在网页中正确导航。
考虑: 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”位于每个视口(viewport)侧“固定”位置的插件或方法。当用鼠标单击(或悬停)时，这将模拟滚动条移动，视差网页插件将做出相应 react 。布局示例(注意外部导航是半透明的):
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.
网页最困难的部分是有足够的“填充内容”占据“起始”点的顶部和两侧。但如果该“填充内容”是一个缩略图库，那么这个特定的视差页面看起来会非常漂亮(而且不寻常!)。
关于javascript - 视差 "scrolling"仅通过导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11445077/