HTML 5独立滚动视角错觉

概述是否有一些示例 HTML代码可以建立以下效果： 有一个前景层,包含文本和图像.然后有一个背景图层,显示图像, 当用户滚动页面时,前景以常规速度滚动,但背景速度较低. 这将创造一个类似摩登原石的人造视角. 你所谈论的这种“虚假观点”被称为 parallax. 网上有很多演示 > http://webdev.stephband.info/parallax.html > http://dev.jonra 是否有一些示例 HTML代码可以建立以下效果：

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

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

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

解决方法 你所谈论的这种“虚假观点”被称为 parallax.

网上有很多演示

> http://webdev.stephband.info/parallax.html
> http://dev.jonraasch.com/scrolling-parallax/examples/scrolling-parallax

我建议在背景附件上使用背景图像：固定,然后设置一个短计时器来检查页面滚动长度.

在定时器的每次更新时,检测滚动长度,并将其乘以修改器(比如0.1),将此新值设置为背景位置：

$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值的方式来否定偏移量.

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

总结

以上是内存溢出为你收集整理的HTML 5独立滚动视角错觉全部内容，希望文章能够帮你解决HTML 5独立滚动视角错觉所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。