<分区>
要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为它们往往会吸引自以为是的答案和垃圾邮件。相反，describe the problem以及迄今为止为解决该问题所做的工作。
关闭 9 年前。
标签 javascript html css
<分区>
要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，因为它们往往会吸引自以为是的答案和垃圾邮件。相反，describe the problem以及迄今为止为解决该问题所做的工作。
关闭 9 年前。
我学到了一些关于视差滚动的知识。
Parallax scrolling is a special scrolling technique in computer graphics, wherein background
images move by the camera slower than foreground images, creating an illusion of depth in a 2D
video game and adding to the immersion.
许多网站都使用它并使用 javascript 对其进行编码。
谁能给出一个代码示例？
教程最近由 Google GDay 举办。
最佳答案
有几个可用的 js 库可以提供视差效果。我个人用过Stellar.js对于以前的元素，但您可能应该研究一下还有哪些其他库可用并且最适合您的需求。
无论您选择什么，基本思想是页面上的视差元素使用固定或绝对 css 定位，这样它们实际上不会直接响应滚动(它们被锁定到窗口或父元素).这也允许设计者精确定义这些元素的起始位置。然后定义函数以通过响应 javascript 滚动事件并根据需要更新元素的 left 和 top 值来控制每个视差元素的移动。
我做了一个非常简单的视差移动示例 here :
<div id="downparallax" style="position:fixed;bottom:0;">Hello world!
<br/>I move in parallax!</div>
<div id="rightparallax" style="position:fixed;left:0;top:50%;">I move right when you scroll down!</div>
window.onscroll = function () {
document.getElementById("downparallax").style.bottom = window.scrollY / 2.0 + "px";
document.getElementById("rightparallax").style.left = window.scrollY + "px";
}
关于javascript - 网站中的视差滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22131617/