javascript - jquery视差滚动效果-多方向

标签 javascript jquery html css parallax

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

我已经准备好图稿并找到了许多 jquery 库,这些库允许我滚动水平/垂直滚动 - 但我不确定如何在特定坐标处将两者组合在一起。 谁能给我指出正确的方向?

编辑:我最初在查看 Superscrolarama 并认为所有问题都已解决 - 但在实现它时遇到了困难 - 我不认为它是我认为的救世主,我还需要水平和垂直视差滚动以实现上述目标,但它似乎不支持 - 所以如果有任何其他提示,我将不胜感激!

最佳答案

我把一些东西放在一起是给你的 jsfiddle。

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

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

它使用 ARROWS 或 MOUSEWHEEL 进行滚动。

有从[left, right, top, bottom] 的过渡。

HTML 和 CSS 非常简单。

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

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

关于javascript - jquery视差滚动效果-多方向,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12461710/

相关文章:

javascript - 如果没有花括号

jquery - 禁用和启用工具提示不起作用

jquery - 使用ajax后查找id

php - 检查用户是否在线

html - 集中一个内容左对齐的 div

javascript - Google 开发工具中显示的对象不一致

javascript - 通过数组传递隐藏字段值和文本框值

javascript - React 添加一个变量名属性

html - 带有 flexbox 的一个大产品 View 的产品列表

html - 如何使用 Bootstrap 中的按钮移至页面底部