问题标签 [parallax]

这就是启动 Parallax 事件运行的所有代码。我正在使用 Lee Brimelow 的 layersmagazine.com 的代码。

当您将鼠标向左或向右移动时，视差效果很好地滚动，但我希望它在加载时自动启动视差效果，滚动一段时间然后停止并切换到由鼠标控制.

MouseOver 事件并不是真正有效的，因为滚动不能很好地处理它。

我目前$(window).bind('scroll', foo);用来监控$(window).scrollTop()和做一些事情来创造视差效果。

在所有桌面浏览器foo()中，用户滚动的每个像素都会被调用，一切都很好。在 iOS 上的 Safari 中，滚动事件仅在滚动完成后触发。

我添加$(window).bind('touchmove', foo);以确保在 iOS 中滑动期间调用该函数，这让我更进一步。当用户松开手指时，页面继续滚动，但事件停止触发。

有任何想法吗？

这是我的第一篇文章，如果它不完美的话，我会道歉。

本质上，我试图达到与 Red Bull Art of Flight 电影网站上出色地使用的效果相同或相似的效果：

http://artofflightmovie.com/

即背景图像在用户向下滚动页面时沿着坐标路径移动。我现在并不担心内容动画，只是背景动画。

我能够做基本的，将背景从 a 动画移动到 b 动画，但是当我想从 b 到 c、c 到 d 等时，我坚持不知道该怎么做。

我试过使用公开可用的：

这允许我在用户滚动时设置背景位置更改，但我不确定如何设置下一个动画。我最初的想法是使用 else if 但这并不成功。

artofflightmovie.com 示例设置了一组背景位置 px 测量值，然后像时间轴一样读取这些测量值。

我对我想要的 CSS 没问题，但是我对 jQuery 的了解还没有达到我可以克服我遇到的问题的水平。

我还获取了“飞行艺术”页面的来源，并尝试创建一个简化版本来构建，但同样无济于事。

任何帮助，将不胜感激

我正在尝试建立一个基于伦敦地铁地图的网站，不同颜色的线条将您带到不同的车站并呈现不同的菜单项。我正在尝试找到一个已经构建的插件，并想知道其他人是否有任何想法？或对可能有用的事情的建议。

我能找到的唯一接近的插件是 joelb.me/scrollpath/，它的方式非常相似，它遵循一条线，但是作为 jQuery 的新手，我正在努力根据自己的需要对其进行编辑。

所以我正在尝试创建一个类似于这个的视差风格网站。然而，虽然他们使用带有“固定”附件的背景图像来实现图像不动的效果，但我想使用 jquery 幻灯片插件。基本上，如果图像包含在滑块中，如何实现图像的“固定”附件和背景位置？目前，幻灯片中的图像只是滚动...

我很高兴提供代码示例，减少沿途所需的任何进一步信息

谢谢！

我正在尝试创建自己的自定义视差插件，以便我能够选择项目从屏幕过渡的方向，并且我只是坚持确保无论用户如何滚动以及无论大小如何窗口，对象消失在正确的点。

目前我有：

您可以猜到，这只会将项目向右移动，直到它离开屏幕。这种方式有不同的结果，因为如果我使用滚轮，如果我使用滚动条，它需要更长的时间才能消失。我还有另一个问题，如果我使用混合或有不同的视口，我会得到不同的结果。

任何提示或指示来实现我所追求的结果？

我的代码的一个工作示例位于http://motoring.egl.me.uk

谢谢马特

如果您在此处查看页面 @ http://8020indie.com/wp-content/uploads/TEC/，您会看到一切正常，但是当您访问带有哈希的页面时，例如http://8020indie.com /wp-content/uploads/TEC/index.htm#content2，内容 div 的水平定位关闭。任何想法将不胜感激。谢谢

http://www.perandersen.no/sandbox/robot/

我曾尝试为横向卷轴冒险/益智游戏编写游戏基础。我在 Chrome 中有一些性能问题，它在 IE 和 Safari 中看起来有问题，但在 FF 和 Opera 中很好。

是否有可能使代码更高效？还有其他实现视差效果的方法吗？这真的让我很恼火，这在所有浏览器中的工作方式都不一样......

我在 javascript 中使用视差效果，但 iPad 出现问题。

我知道 webkit 触摸设备上不会触发“$(window).scroll” - 只有当我们释放屏幕时 - 所以我正在使用：

问题是它会在顶部或底部闪烁 .divCancas 几个像素，具体取决于我是滚动到顶部还是向下。

我跟踪了 $(element).css('top', initialTop-(scrollTop*speed)); 上传递的 TOP 值 而且每次都是正确的。正确的“TOP”值，即使 webkit 将它移动几毫秒到错误的位置。

我也试过：-“margin-top”而不是“top”，没有区别。- 删除所有其他对象并使“.each”循环仅通过一个 div，所以我想这不是 jQuery 性能问题。

有没有人遇到过这个问题？

非常感谢迭戈

我们的网站上有视差滚动。
它很简单，每边有 4 层，根据线性函数以不同的速度滚动。

但是，它并不像我想要的那样顺利，尤其是当我打开多个标签时。
您注意到滚动和视差图像更新之间的轻微延迟以及帧速率降低。

小屏幕上的帧率要好得多（我正在开发 27 英寸屏幕），但我想在所有屏幕上获得最佳性能。

这是设置滚动的代码：

这是 CoffeeScript，但我希望它对大多数 JS 开发人员来说足够简单。

我已经做的事情：

• 预取所有元素，以便可以在函数中立即访问它们。
• 预取，background-position-x因此不需要每次迭代都获取它。
• 由于开销增加，请勿使用 jQuery 设置样式。
• 尽可能少地计算所有内容（因此baseTop）

每一层都是静态定位的，所以它们不会抖动，我确保修改背景位置，这样我就不会导致页面重排。

还有什么我可以尝试的吗？

由于性能与屏幕大小成比例，我相信这是一个渲染问题，而不是 JS 问题。也许一些花哨的 CSS3 可能会有所帮助？