HTML 5独立滚动视角错觉

Question

是否有一些示例HTML代码可以建立以下效果:

有一个前景层,包含文本和图像.然后有一个背景图层,显示图像,

当用户滚动页面时,前景以常规速度滚动,但背景速度较低.

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

Answer 1

你所谈论的这种"虚假视角"被称为视差.

网上有很多演示

• http://webdev.stephband.info/parallax.html
• http://dev.jonraasch.com/scrolling-parallax/examples/scrolling-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值的方式来否定偏移量.

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