视差电子滚动效果

Parallax escrolling effect

本文关键字：滚动 视差      更新时间：2023-09-26

我想做和这个页面完全相同的事情。 http://www.googleventures.com/

这就像当你向下滑动页面的下部时出现视差效果。如何使用图像作为标题来做到这一点？纯jquery？有幻灯片上功能吗？

我做了一个替代选项。 您甚至不需要 z-index，因为较新的元素在 z 索引中自动更高。

.HTML 

<div class="fixed">
  <img src="http://placekitten.com/800/300" />
  This is some text that will be static as well
</div>
<div class="scroll">
  Lorem ipsum dolor sit amet
</div>​

.CSS

.fixed{
    position: fixed;
}
.scroll{
    background: #eee;
    height: 700px;
    position: relative;
    top: 350px;        
}​

工作示例：http://jsfiddle.net/3vxBA/

看起来标题有一个固定的位置和一个较低的 z 索引，所以当你定期滚动时，页面继续向上，但标题保持在主要内容后面的相同位置。

示例 HTML：

<body>
<div id="header">
some image here
</div>
<div id="pagecontent">
everything else
</div>
</body>​

示例 CSS：

body {
    padding-top: 100px; /* #header height */
}
#header {
    position: fixed;
    top: 0px;
    z-index: -1;
    background-color: #ccccff;
    height: 100px;
    width: 100%;
}
#pagecontent {
    background-color: #ccffcc;
    height: 1000px;
    width: 100%;
}​

这是一个工作示例： http://jsfiddle.net/Nv7Ku/

相关文章：