如何进行水平视差滚动 [英] How to do horizontal parallax scrolling

问题描述

我正在使用最新版本的Bootstrap，JQuery和Skrollr.

I'm using the latest version of Bootstrap, JQuery, and 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.

推荐答案

如注释中所述，skrollr不支持水平滚动，但是您可以执行其他操作:

As mentioned in the comments, horizontal scrolling isn't supported by skrollr, but you can do something else:

您可以使用垂直滚动条在水平方向上为元素设置动画.

You can use the vertical scrollbar to animate elements in a horizontally.

这是> Skrollr的水平滚动效果 >
这是 该帖子中的jsFiddle

Here's a Stack Overflow post on Horizontal scrolling effect with Skrollr
And here's a working demo in jsFiddle from that post

希望这可以帮助您

这篇关于如何进行水平视差滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！