jQuery视差滚动效果-多方向

Question

我需要为客户构建一个多方向的 JQuery 视差页面 - 他们基本上希望它的工作方式类似于这个网页 - https://victoriabeckham.landrover.com/INT

我已经准备好了艺术设计，并找到了很多 jQuery 库，可以让我滚动水平/垂直 - 但我不确定如何在特定坐标处结合两者。请问有人能指点一下吗？

编辑：起初，我签署了这篇文章，认为 Superscrolarama 可以解决所有问题 - 但是在实施过程中遇到了困难，我认为它并不能像我想象的那样解决水平和垂直视差以及滚动所需的功能 - 所以如果您有任何其他建议，我将非常感激！

- Dancer

---

“嘿，我有一个想法：让我们改变一下自上世纪80年代初以来存在的最基本的用户与计算机互动方式，完全打破它！如果新方式够吸引人，没人会介意！”——抱歉，但是在页面中途将竖向滚动改为横向滚动是有根本性问题的。 - Blazemonger

当你到达正确的位置时，本质上是同时执行两个操作。 - Orbling

基本上，它不会水平滚动，而是通过将滚动值映射到元素的水平位置来伪造水平滚动效果。 - Asciiom

该网站（据称）的作者在这里谈到了它的工作原理：https://dev59.com/IGkv5IYBdhLWcg3wnB87#10856671。 - rexmac

@DBUK - 如果你对这个效果背后的算法感兴趣，我已经在 jsfiddle 上实现了它（包括四个方向）。请查看我的回答。 - Louis Ricci

Answer 1

我在jsfiddle上为你拼凑了一些东西。

http://jsfiddle.net/9R4hZ/40/

这个脚本首先初始化所有对象的起始位置，然后设置箭头键和鼠标滚轮的处理程序。之后，算法的核心在于视差滚动函数(parallaxScroll)中。

它使用ARROWS或MOUSEWHEEL进行滚动。

有[左、右、上、下]过渡效果。

HTML和CSS非常简单。

运行它的JS/jQuery是很容易理解的。

这是一个有趣的效果，似乎适合艺术类型的网站。

- Louis Ricci

---

@DBUK - 对于像这样简单的效果，我更喜欢编写自己的代码。插件有其存在的意义，但我们正在谈论大约150行JavaScript代码。在我看来，你可以从我随意编写的示例中学到更多，而不是从一个全面的jQuery插件（如Scrollrama）中学到的。 - Louis Ricci

很遗憾，我还没有能力编写自己的代码，但希望不久之后可以。不过从看你的js代码，我对它的理解比scrollrama等更好，再次感谢 :) - DBUK

感谢您提供的优秀脚本。如果我想控制滚动速度，那么应该在脚本的哪里进行更改？请给予建议。 - Raja

@Yadheendran - 对于 "parallaxScroll(NUM_OF_PIXELS_TO_SCROLL)" 的调用需要一个参数，如果你增加参数的大小，它会滚动得更快。你也可以减少 "window.setInterval" 的时间间隔。 - Louis Ricci

Answer 2

你尝试过像Scrollorama（http://johnpolacek.github.com/scrollorama/）或Curtain（http://curtain.victorcoulon.fr/）这样的库吗？

我知道你在问题中提到了你已经调查了不同的库，但是根据它们的工作原理，很难真正建议如何使用正确的坐标。

*编辑1

如果你还没有看到，scrollorama的作者也做了superscrollorama，它可以在将元素固定时进行动画等方面提供更多控制器。 http://johnpolacek.github.com/superscrollorama/

- NicMagnier

---

说得过早了！不支持多方向视差。 - Dancer

您的意思是用户可以垂直滚动并水平导航内容吗？ - NicMagnier

不，他们需要在一个方向（向下）滚动，并且在某个特定点上，视差需要从右到左，尽管他们仍然向下滚动。他们想要的东西几乎与https://victoriabeckham.landrover.com/INT完全相同。 - Dancer

我还没有时间仔细研究scrollorama，但我认为可以将元素向左或向右移动。我在这里进行了快速测试：http://mx981.com/stuff/scrollrama/test.html - NicMagnier

谢谢Nic，我需要使用Superscrollorama，因为我需要结合固定和视差效果。我无论如何都不能让上面的脚本在固定的Superscrollorama语法中工作 - 如果你能解释一下，那么额外的100美元就是你的！ - Dancer

Answer 3

这篇在smashinghub.com的文章展示了一系列滚动和视差效果的JQuery插件。我非常确定其中一个能帮到你。

看起来jQuery Scroll Path是这些插件中最先进或最适合你的要求。

- Ma Jerez

Answer 4

我知道我来晚了，这可能看起来非常明显，但你是否尝试过反向工程https://victoriabeckham.landrover.com/INT上的操作？看起来ScrollAnimator脚本完成了大部分工作。我会下载他们的网站并在本地进行操作，逐步减少组件，直到找出哪些组件提供了哪些功能。然后我会阅读这些组件以了解它们是如何实现的。

- Kale McNaney

Answer 5

你需要使用scrollpath插件

make path

- Pankaj Thakur