Question

是否有一些示例HTML代码可以产生以下效果：

有一个包含文字和图像的前景图层。然后有一个背景图层，显示图像，

当用户滚动页面时，前景会以常速滚动，但背景会以较低的速度滚动。

这将创造一个类似摩登原石的人造视角。

Answer 1

您所谈论的这种“虚假视角”称为parallax。

网上有很多演示

我建议在body上使用background-attachment: fixed使用背景图片，然后设置一个短计时器来检查页面滚动长度。

在每次更新计时器时，检测滚动长度，并将其乘以修饰符（比如0.1），将此新值设置为background-position：

$body = $('body');

function parallax()
{
  var pageOffsetX, pageOffsetY, modifiedOffsetX, modifiedOffsetY;

  pageOffsetX = ...//get the offset
  pageOffsetY = ...//get the offset
  modifiedOffsetX = pageOffsetX * 0.1;
  modifiedOffsetY = pageOffsetY * 0.1;

  $body.css('background-position', modifiedOffsetX + 'px ' + modifiedOffsetY + 'px');
  setTimeout(parallax, 100);
}

parallax();

修饰符是用户滚动的每个px背景应移动多少。如果您的背景不应重复，则可能需要调整偏移量，并且您可能需要根据获取pageOffset值的方式来否定偏移量。

调整超时将改变背景的响应性。您可能能够捕获鼠标滚动事件，但您还必须检查用户是否通过链接等跳过页面。

Answer 2

我要完成此任务的方法首先是为页面设置background: fixed，然后不断轮询页面以确定window.pageYOffset值是否已更改[1]。如果它已经改变了，你可以将背景图像向上或向下移动（半个|三分之一|四分之一|任何），以模仿你所说的效果。

我不打算尝试编写代码，但我很想看到你的结果。

[1]注意：不要通过将事件附加到pagescroll事件来执行此操作，因为这样做可以seriously screw up most browsers，因为Twitter很难学习。

Answer 3

这些不是您正在寻找的机器人，但最终效果非常相似：http://webdev.stephband.info/parallax.html

这些图层会随着鼠标的移动而移动，并且，根据它们的尺寸（以及图层初始化的选项），它们会以不同的方式移动，并采用类似的方式。

你可能想要玩它并调整它以使视差效果只是水平的（设置选项xparallax:false）。

HTML 5独立滚动视角错觉

3 个答案: