twitter-bootstrap 如何进行水平视差滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27843333/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to do horizontal parallax scrolling
提问by Fraze
I'm using the latest version of Bootstrap, JQuery, and Skrollr.
我正在使用最新版本的 Bootstrap、JQuery 和 Skrollr。
I would like to have a static background and a couple scenes that occur as you scroll by parallax scrolling. I'm able to make scenes as you scroll but I'm looking for a way to where it appears that you are not moving down the page.
我想要一个静态背景和几个场景，当您通过视差滚动滚动时会出现这些场景。我可以在您滚动时制作场景，但我正在寻找一种方法，使您不会在页面上向下移动。
I'm looking to make a scene like this image:
我正在寻找像这样的场景：
Notice how it moves right-left but never appears like you are actually scrolling down the page.
请注意它是如何从右向左移动的，但从未像您实际向下滚动页面那样出现。
That's the best I can explain it. Can't seem to find any good tutorials to accomplish this. Any help in the right direction would be outstanding.
这是我能解释的最好的了。似乎找不到任何好的教程来实现这一点。任何在正确方向上的帮助都会非常出色。
回答by Allmighty
As mentioned in the comments, horizontal scrolling isn't supported by skrollr, but you can do something else:
如评论中所述，skrollr 不支持水平滚动，但您可以执行其他操作：
You can use the vertical scrollbar to animate elements in a horizontally.
您可以使用垂直滚动条在水平方向上为元素设置动画。
Here's a Stack Overflow post on Horizontal scrolling effect with Skrollr
And here's a working demo in jsFiddle from that post
这里有一个堆栈溢出后横向滚动与Skrollr效果
而这里的工作演示从该职位的jsfiddle
Hope this gets you going.
希望这能让你继续前进。
回答by KyleMit
jInvertScrollallows for horizontal scrolling and supports parallax.
jInvertScroll允许水平滚动并支持视差。
Here's an article on how to create horizontal parallax scrolling with jInvertScroll
这是一篇关于如何使用 jInvertScroll 创建水平视差滚动的文章
Just use different values for horizon and middle scroll
只需为地平线和中间滚动使用不同的值
<div class="horizon scroll">
<img src="http://i.imgur.com/IImTBHM.png" alt="Background" />
</div>
<div class="middle scroll">
<img src="http://i.imgur.com/e2pwKbv.png" alt="Clouds and Baloons" />
</div>
Here's a demo in stack snippets:
这是堆栈片段中的演示：
Note: Try viewing in full page
注意：尝试全页查看
(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;
}<link href="http://www.pixxelfactory.net/jInvertScroll/css/jInvertScroll.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.pixxelfactory.net/jInvertScroll/js/jquery.jInvertScroll.js"></script>
<div class="container">
<div class="horizon scroll">
<img src="http://i.imgur.com/IImTBHM.png" alt="Background" />
</div>
<div class="middle scroll">
<img src="http://i.imgur.com/e2pwKbv.png" alt="Clouds and Baloons" />
</div>
<div class="front scroll">
<h1 class="intro">Scroll down</h1>
<div class="panel1 page">
<h2>The Hot Air Balloon</h2>
</div>
<div class="panel2 page">
<h2>How they work</h2>
</div>
<div class="panel3 page">
<h2>Practicalities</h2>
</div>
<div class="panel4 page">
<h2>Section 4</h2>
</div>
</div>
</div>