2

我正在开发一个在页面顶部具有全尺寸背景图像的视差网站。它目前正在使用固定位置的容器，这些容器在滚动事件上使用 jquery 进行调整。

这是一个例子

CSS

#bg{
      z-index: -5;
      positioned: fixed;
      width: 100%
      height: auto;
   }

#skyline{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
   }

标记

<div id="bg">
  <img id="skyline" src="skyline.jpg" alt="Skyline"/>
</div>

然后，当触发滚动事件时，我使用 jQuery 来调整顶部位置。结果有效，但非常不稳定。我曾尝试降低图像的质量/文件大小，但从我所做的研究来看，它看起来像是因为背景覆盖的区域（重绘越大，它会越不稳定）

从我一直在做的研究看来，使用 HTML 5 画布将有助于解决这个问题。我想知道是否有人可以建议如何使用 HTML5 Canvas 实现与窗口一起调整大小的全尺寸背景。

任何帮助都会很棒

谢谢

4

1 回答 1

1

编辑：我想我理解你的困惑。所以

dx = 0
dy = 0
dWidth = window.innerWidth // use your favorite method for obtaining the width/height
...

然后您所要做的就是改变每一帧的源坐标，而 sWidth 和 sHeight 将等于 dWidth 和 dHeight（这是切片的大小，您希望它与您的屏幕匹配）。

我希望这有帮助

查看canvas 的文档。我认为解释得很好。

查看示例 3，您可以在其中指定图像的偏移量：

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

您使用的图像到底有多大？如果您正在移动 3mb 的图片，我可以想象它在大多数机器上会很不稳定。

此外，对于动画，Chrome/Chromium 的表现要好得多，这就是为什么我将它用于开发，但在 Firefox 中进行一般浏览。

于 2013-04-10T18:55:35.813 回答