问题标签 [parallax]

我越来越多地看到一种效果，即 png 被加载到一系列 DIV（或一个 div）中，然后基于按钮单击或基于滚动逐帧排序。我试图查看代码，我知道 javascript 正在做繁重的工作，但我还是有点迷茫，有没有关于这种技术的教程？例子？

动画示例（多个 div） http://atanaiplus.cz/index_en.html：

动画示例（一个 div）： http ://www.hyundai-veloster.eu/

滚动动画示例： http: //discover.store.sony.com/tablet/#design/ergonomics

I'm using this jQuery code to make a parallax effect when scrolling :

The problem is that my background image is at 300px from top of my window at start and with this code I can't set this origin position to start scrolling the background at 300px from top, the background-image jump directly to top:0px

And one another thing :

Is it possible to stop the effect if I reach a specific position (Example : If the background-position reach 300px just stop the movement)

Any ideas about it? Thanks!

整天都在试图弄清楚我正在构建的网站到底出了什么问题，但我终其一生都无法弄清楚出了什么问题。

该网站的主要功能之一是视差滚动，当用户向下滚动时，它应该是漂亮和流畅的，并且具有多层动画。

基本上，每当http://beta.residencyradio.com/网站在 Chrome 中加载（在 Windows 上）并且您尝试向下滚动页面时，都会出现明显的延迟并且滚动非常跳跃。

但是，如果您转到地址栏，请单击地址并按回车键，然后再次尝试滚动，它应该会顺利滚动！

我用这个把头发扯掉了，我认为它也会影响 Mac 上的 chrome，所以如果有人知道这是怎么回事，这将是一个巨大的帮助，将不胜感激！

我添加了示例中可用的手势类以支持手势识别。我在顶层有 4 个精灵要在向左/向右滑动时移动，在底层有 3 个精灵要滑动。

我有以下代码

我无法平滑地向右/向左滑动它会产生顶层的重叠。请帮助我平滑图层移动。

任何形式的帮助将不胜感激

谢谢...

我有三个具有以下 z 顺序和尺寸（无偏移）的子层作为 cocos2d 父层的子层：

最顶层：z：-1 宽度：2048 高度：2048
中间层：z：-2 宽度：1536 高度：1536
最深层：z：-3 宽度：1024 高度：1024

使用 UIScrollView（附加到 ViewController）作为 cocos2d 使用的 glView 的子视图，我使用以下比率平移（并因此滚动）每个层的位置（从而实现 3D 效果）：

最顶层：dragPt.x * 1（y 相同）
中间层：dragPt.x * 0.75（y 相同）
最深层：dragPt.x * 0.5（y 相同）

我检测每一层上的用户输入如下：
- 将另一个子视图（我们称之为 seeThrough）附加到 glView 具有以下尺寸 480x320（应用程序处于横向模式）
--(BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event在此子视图中使用，我将触摸点存储在一个名为“touchLocation”的 iVar。
- 在我的 cocos2d-layer 中，我使用以下代码来确定每一层的触摸位置：

（320 是屏幕高度，减去它需要将 Y 从 UI 转换为 gl 坐标系）

滚动图层时，它们的位置是负数。通过使用 seeThrough 视图作为参考平台来捕获 480x320 表面上的触摸，我可以通过简单地从 seeThrough 视图中捕获的点减去每一层的负位置值来成功确定每一层坐标系上的触摸位置。
问题是当根本没有这样的参考点时，例如，当我尝试在没有用户输入的情况下在其中一个图层上获取精灵的位置时。
没有参考点，我发现自己无法想出一个解决方案，使我能够确定 cocos2d 层之一上的任何特定点。

我尝试了几种方法（convertToNodeSpace、convertToWorldSpace 以及随着时间的推移最终疯狂的数学），但都没有成功。

因此，我的问题是：如何确定其中一层上的精灵的位置并将其转换为其他层之一的空间？

场景：
- 精灵在最深层，但我想将它移动到中间层上的位置
- 精灵在最顶层，我想将它移动到最深层
- 等等...

我正在寻找有关 Parallax 网页设计的教程和展示，所有这些都使用 jQuery 在页面上实现所需的结果。是否可以在 Facebook 应用程序中使用视差效果？特别是页面内的应用程序（页面选项卡）。

我注意到 Facebook 选项卡应用程序无法与某些 jQuery 函数一起正常工作，因此这可能会破坏所需的滚动结果。此外，它将在 iframe 内，我已经看到视差 + iframe 的一些不好的结果。

好的Parallax代码参考：Smashing Magazine Parallax Tutorial

对于 iOs 应用程序，我想在 Windows Phone 7 中重新创建集线器的视差效果。我可以使用以下代码来实现它：

但效果并不完美。在 WP7 中，在集线器的最后一页上，背景图像的右侧与视图的右侧完美契合。

在这里，如果我的图像小于我的滚动视图宽度/2，我可以看到我的 viewController 背景颜色...

我想根据滚动视图 contentSize.width、image.frame.size.width 和新的 scrollview.contentOffset.x 来获取图像的新 x 位置。目标是在滚动视图的最后一页上，我的背景图像位置是

请帮我 ！谢谢 ！

如何在我的 2D 横向滚动游戏中绘制背景图块？对于 OpenGL es，该循环是否合乎逻辑？我的图块 2400x480。我还想为我的游戏使用视差滚动。

因此，我使用本教程构建了一个站点，并遇到了一个小错误。

我有一组照片（大小约为 700-800 像素），我想将它们用作垂直页面每个“部分”的背景图像。

我通过 CSS 加载图像没有问题，但是当我尝试使用以下命令将图像重新调整为全屏时

或者

jQuery 滚动动画变得非常不稳定/滞后。

并且澄清一下，当图像以正常大小加载（并且不填满整个窗口）时，页面滚动非常流畅。

有什么建议么？使用 CSS 调整图像大小的不同方法？有什么方法可以优化 jQuery 脚本以防止呆滞？

我已经阅读了很多关于 jQuery 视差的内容，但我根本不明白。我想做和这个网站一样的事情：

http://www.tokiolab.it/#/

如您所见，第一页是一个非常简单的动画，但是当您滚动下一页时，会开始覆盖第一页的一部分。有人可以帮帮我吗，我知道你需要使用 z-index 但你如何实现这种效果 - 它似乎并不难，也许是固定背景或固定 div，有什么想法吗？

非常感谢！提前致谢！