Question

我已经了解了有关视差滚动的知识。

    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最近举办了教程。

Answer 1

有几个js库可用于提供视差效果。我以前曾亲自使用Stellar.js进行项目，但您可能应该研究哪些其他库可用并最适合您的需求。

无论你选择什么，基本的想法是你的页面上的视差元素使用固定或绝对的CSS定位，这样他们实际上不会直接响应滚动（它们被锁定到窗口或父元素）。这也允许设计者精确定义这些元素的起始位置。然后定义函数以通过响应javascript滚动事件并根据需要更新元素的左侧和顶部值来控制每个视差元素的移动。

我做了一个非常简单的视差移动示例here：

HTML

<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>

JS

window.onscroll = function () {
    document.getElementById("downparallax").style.bottom = window.scrollY / 2.0 + "px";
    document.getElementById("rightparallax").style.left = window.scrollY + "px";
}

Parallax在网站上滚动

1 个答案:

HTML

JS