23

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

我已经准备好艺术品，并找到了许多 jquery 库，它们可以让我滚动水平/垂直 - 但我不确定如何在特定坐标处将两者结合在一起。谁能指出我正确的方向？

编辑：我最初确实在查看 Superscrolarama 并认为所有问题都已解决后签署了这篇文章 - 但在实施它时遇到了困难 - 我认为它并不是我认为的救世主，我需要水平和垂直视差以及滚动到实现上述，它似乎不支持 - 所以任何其他提示我都会非常感激！

4

5 回答 5

20

我把东西扔在一起对你来说是 jsfiddle。

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

该脚本首先初始化所有对象的起始位置。然后为箭头键和鼠标滚轮设置处理程序。之后是 parallaxScroll 函数中算法的核心。

它使用箭头或鼠标滚轮进行滚动。

有 from [left, right, top, bottom] 过渡。

HTML 和 CSS 非常简单。

运行它的 JS/jQuery 是不言自明的。

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

于 2012-10-03T18:16:15.200 回答
6

Did you look into librairies like Scrollrama http://johnpolacek.github.com/scrollorama/ or Curtain http://curtain.victorcoulon.fr/?

I know in your question you mention that you already looked into different librairies but depending how they work it's difficult to really suggest how to use proper coordinates.

*edit1

If you didn't see it yet, the auther of scrollorama also did superscrollorama which give a bit more controler over the animation for example animation when an element is pinned.

http://johnpolacek.github.com/superscrollorama/

于 2012-09-23T14:06:42.197 回答
5

smasinghub.com上的这篇文章展示了一组用于滚动和视差效果的 JQuery 插件，我完全相信其中一个会对您有所帮助。看起来jQuery Scroll Path是其中最先进的或适合您的要求。

于 2012-09-25T07:44:55.033 回答
1

我意识到我来晚了，这似乎非常明显，但是您是否尝试过逆向工程他们在https://victoriabeckham.landrover.com/INT上所做的事情？看起来ScrollAnimator 脚本完成了大部分工作。我会下载他们的网站并在本地弄乱它，减去部分，直到我弄清楚哪些组件提供了哪些功能。然后我会通读这些内容以了解它们是如何实现的。

于 2012-10-03T16:15:07.187 回答
0

你有使用滚动路径插件

make path
于 2013-03-02T11:55:21.837 回答