javascript - 创建 'under the rug' 视差页脚？

Question

我对在这个网站上提问非常陌生，但通过阅读它学到了很多东西，所以非常感谢!

有点随机，看到了这个页脚上这种令人敬畏的“地毯下”风格的视差效果 - 并寻找一些关于如何将其提升的提示？

http://ideaware.co/our_work

非常感谢任何帮助!!!

Answer 1

非常简单!制作一个绝对定位的页脚，其 z-index 低于主要内容。将其放入刚刚创建的 div 的 css 中: 位置:固定。另外，不要忘记将内容 div 的高度设置得短一些，以便可以看到页脚。

祝你好运!

太模糊了？只要问，我就会回答!

[编辑]:

fiddle example

对于这个例子，我将使用一个简单的 HTML 页面，其中包含两个 div。第一个是#content 容器，第二个是#footer。

<div id="content">
</div>
<div id="footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis congue malesuada. Donec a eros ac risus facilisis pellentesque sit amet feugiat orci. Ut adipiscing, arcu sit amet facilisis condimentum, diam arcu tempus erat, at sagittis libero felis quis nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam dignissim eros nisi, ut vehicula nulla dictum vel. Aenean quis felis libero. Aliquam vulputate sem eros, sed vehicula sem tincidunt vel.</p>
 </div>

//我在页脚中添加了一些文本，以便您可以实际看到视差效果

我向内容 div 添加了以下 CSS :

     #content {
    width:100%;
    height:1500px;
    margin-bottom:200px;
    background-color:#123456;
       }

请小心将 margin-bottom 属性设置为等于页脚高度。否则您将无法看到 #footer div。

页脚的 css 是:

   #footer {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:200px;
    z-index:-1;
    background-color:#000;
       }    

请注意，position 设置为fixed。这将使#footer 相对于窗口定位，而不是相对于文档定位。我还设置了z-index:-1。我这样做了，因此 #footer 将位于 #content 下方。如果删除此属性，您会注意到 #footer 将始终位于 #content 上方，并且视差效果会丢失。

所以是的!这就是全部。