问题标签 [parallax]

所以我今天一直在为我正在开发的应用程序制作一个简单的启动页面

我想使用一些 css 动画来放置移动背景（视差），如下所示
http://css-tricks.com/parallax-background-css3/

我通过 webkit animate 函数在关键帧配置中使用了背景位置移动

这是一个样本

这产生了相当差的性能。背景图像是一个 png32，透明度压缩为 896kb。我尝试使用空白 translate3d 语句启动硬件加速，但没有发生明显的变化。

我还尝试将 background-position 更改为 translate3d ，它移动​​了整个 div 以及它包含的内容。我不确定如何在不影响性能的情况下产生这种效果。

这是测试站点www.auroragm.sourceforge.net

我在一个很长的视差网站上工作（比如 12k 像素）。我想创建一个滚动点列表，我认为这会改善用户体验。

我认为我需要做的：1）创建一个由滚动点组成的数组，例如 0px 850px 1300px 2000px 2500px （因为它很容易所以我可以理解:) 2）在 keydown keyCode == 37 move（动画) 到上一个点，在 keyCode == 39 或 keyCode == 32 上移动到下一个点 3) 如果它的第一个滚动点，不要转到前一个，因为它不存在，与最后一个滚动点相同

有人可以教我如何编写代码吗？这是我第一次使用 javascript/jquery（或编程）

我正在使用 github 使用的这个插件来实现它的视差效果：

https://github.com/cameronmcefee/plax

这是一个很棒的插件，但我想在一个页面上多次使用它。

所以这是行不通的，我相信我可以做一些简单的事情来让它工作。

当用户到达页面的特定点时，我尝试做一个小动画：

当用户滚动到 1000px（例如）时，我有一个名为“clouds”的 div，它需要根据用户的滚动来移动。

如果用户向下滚动，云向左移动，如果用户向上滚动，云向右移动。

我已经尝试过这段代码，但不幸的是它不起作用（问题是 div 在开始时没有保持其位置）

任何帮助将不胜感激！谢谢！

有谁知道GitHub Java 版 Tiled中对视差层的临时支持如何正常工作？

它编译，并且执行良好。但是，如果我将图层设置为viewplane distance0.00（最小值）和eye-viewplace distance0.00，我希望代表游戏视口的黄色矩形与编辑器视图以 1:1 的比例滚动。它没有，并且一直滚动到编辑器视图的左侧会导致黄色的“视口”矩形离开屏幕的一半。

我误解了该工具，还是它不在工作状态？如果我能理解，那么扩展 Slick2D 的 TiledMap 类以渲染具有视差深度的图层应该是微不足道的。

我正在玩并尝试建立一个视差网站 - 是的，我知道它们是一种令人讨厌的时尚，但我仍然想尝试一下。因此，为了获得灵感，我一直在查看各种优秀视差网站的示例，并遇到了这个：https ://victoriabeckham.landrover.com/INT 。

它使用鼠标滚轮、滚动条和锚链接进行平滑滚动。我一直在寻找可以实现这种效果的 jQuery 插件，但似乎只能找到使用内部页面链接的插件——锚点或 ID（详见下文）——而不是鼠标滚轮和滚动条。我很有可能使用错误的关键字进行搜索。有谁知道找到这些插件的正确术语或知道任何可以实现这种效果的插件？

附带说明一下，我目前正在学习 jQuery 和 Javascript，但还处于早期阶段 - 仍在通过 codeacademy 拖网，还没有进入任何真实世界的代码。所以目前我正在使用插件作为一种学习方式，但希望在几个月内我可以构建自己的东西！

平滑滚动到锚标签或 ID：

• http://archive.plugins.jquery.com/project/ScrollTo
• http://jsfiddle.net/9Amdx/7/
• http://arthurclemens.github.com/jquery-page-scroll-plugin/
• http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12
• http://www.designova.net/scrollerbird/
• http://chris-spittles.co.uk/?p=462
• http://joelb.me/scrollpath/（*@DrunkRocketeer提供）

并且，另一个使用类似滚动技术的视差网站示例：

• http://www.ascensionlatorre.com

这是我正在处理的网站：http: //kognitek.nazwa.pl/stockize/mak/MMprodukcja/parallaxProject/stromaTestowa/test.html

该站点在使用Opera上的箭头键向下滚动时闪烁。这是我用于滚动的代码：

我已经花了一些时间试图解决这个问题，但仍然找不到这种行为的原因。网站在 Chrome、Firefox、IE8、IE9 中运行良好。问题仅出现在 Opera 中。我知道我在 index.html 的末尾得到了这部分代码 x3，一旦找到解决方案就会优化它。

知道这里有什么问题吗？

编辑：

我创建了这个小提琴： http: //jsfiddle.net/mymlyn/Mr5vR/起初，脚本似乎很好，但是当你到达底部并尝试再次上升时，屏幕开始闪烁

编辑2：

我认为它可以防止默认问题，解决这个问题

编辑X：

我希望我没有编辑这个文件失败，所以它没有成为一个社区维基......无论如何我升级了代码并且它在这里可用：http: //cssdeck.com/labs/swayiqbq/2 它使用.browser 那将被删除jQuery 1.9。

我正在尝试构建一个视差站点，它会在滚动站点时移动一些元素。但是，在阅读了 Paul Irish 的这篇文章之后，我没有使用滚动事件侦听器，而这段视频说滚动侦听器有点错误。我的问题是：requestAnimationFrame

1. 它在 Chrome 中看起来很流畅，但在 Firefox 中闪烁严重。我在这里做错了吗？
2. 我的代码实际上是否比使用普通滚动事件侦听器占用更多资源？每次我玩这个代码时，我都能听到我的笔记本电脑风扇在燃烧。

我的文件位于http://www.socialbuzz.com.au/index.html，请滚动到页面底部以查看正在从 javascript 操作的元素。

我想做与此页面完全相同的操作。http://www.googleventures.com/

当您向下滑动页面的下部时，它就像一个视差效果。如何使用图像作为标题来做到这一点？纯jQuery？有 onSlide 功能吗？

我希望在网站上实现视差效果。我想知道是否可以在页面的不同部分实现这种滚动效果而不相互影响。

我创建了一个有点过于简单的例子来说明我想要做什么。我希望精灵（红色圆圈和绿色方块）以与实际背景不同的速率向上移动。但是，a) 和 b) 中的示例位于不同的 DIV 中，并且它们具有不规则的边框，位于同一容器内的另一个 div 中。像这样：

有没有办法通过 div 和边框向上移动精灵，但在主背景上不可见（在这种情况下为蓝色）。

b) 部分中的方块会向上移动到 a) 部分，还是有办法限制对象可以移动多少像素或百分比？