如何进行水平视差滚动
我正在使用最新版本的Bootstrap，JQuery和Skrollr。
我希望有一个静态背景和一些场景，当您通过视差滚动滚动时。 我可以在你滚动时制作场景，但我正在寻找一种方法来显示你没有向下移动页面。
我想制作一个像这个图像的场景：
注意它是如何向右 – 左移动但从未出现过你实际上是在向下滚动页面。
这是我能解释的最好的。 似乎无法找到任何好的教程来实现这一目标。 任何朝着正确方向的帮助都会很出色。
正如评论中所提到的，skrollr不支持水平滚动，但您可以执行其他操作：
您可以使用垂直滚动条在水平方向中为元素设置动画。
这是使用Skrollr进行水平滚动效果的Stack Overflowpost
这是来自该post的jsFiddle中的一个工作演示
希望这能让你前进。
jInvertScroll允许水平滚动并支持视差。
这是一篇关于如何使用jInvertScroll创建水平视差滚动的文章
只需对地平线和中间滚动使用不同的值
这是堆栈片段中的演示 ：
注意 ：尝试在整页中查看
(function($) { $.jInvertScroll(['.scroll']); }(jQuery));
html, body { padding: 0; margin: 0; font-family:'Open Sans', sans-serif; font-weight: 300; font-size: 16px; color: #555; background: #9fdefd; } h1, h2 { color: #238acb; } .horizon { line-height: 0; z-index: 100; width: 3000px; } .middle { line-height: 0; z-index: 250; width: 4500px; } .front { z-index: 500; top: 150px; width: 6000px; } .intro { position: absolute; left: 500px; top: 0px; padding-right: 50px; background: url('http://i.imgur.com/3woqwh2.png') no-repeat right 5px; } .page { position: absolute; top: 0px; width: 500px; background: white; padding: 10px 30px; border: 1px #eee solid; } .panel1 { left: 1500px; } .panel2 { left: 2575px; } .panel3 { left: 3800px; } .panel4 { left: 5100px; }
Scroll down
The Hot Air Balloon
How they work
Practicalities
Section 4