简单视差，CSS图层，在滚动时显示最后一部分 [英] Simple parallax, CSS Layers, reveal last section when scrolling

问题描述

我最近在网络世界上看到了一个非常酷的效果。这是分层的外观。用户将向下滚动页面，最后一部分将出现在页面的前几个部分下。有时它是一个图像，但我发现内容可以像这样显示。

现在，我非常熟悉 z-index 和CSS定位。

但是，我似乎无法获得正确的组合， 。

HTML：

 < div id =main >内容内容内容内容内容内容< / div> 
< div id =revealed-section>< / div> 
  

所以 #main 在＃revealed-section 之上，并且一旦用户向下滚动到某一点＃reveal-section 。

我做过很多次搜索，但我不知道这种技术的用法。

有任何想法吗？

这里！： http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.htmlrel =nofollow> http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html
我想从幻灯片3到4，但它必须是与内容，而不是只是一个背景图片。

我也想要一个页脚，看起来好像它最初附加到 #main ，但是当用户进一步向下滚动，＃revealed-section 展开。

这样做的一种方法我猜测是在某一点将页脚粘贴在屏幕底部。任何提示？

解决方案

显示的部分可以 position：fixed 。占位符应该具有设置的高度，只是为了扩展页面，以便用户向下滚动并查看显示的固定div。

HTML

 < div id =main>内容内容内容内容内容内容< / div> 
< div id =revealed-section-placeholder>< / div> 
< div id =revealed-section>此处的内容< / div> 
  

CSS

  #main {position：relative; z-index：1;} 
＃revealed-section {position：fixed; bottom：0;} 
  

检查： http://jsfiddle.net/qYbs7/1/

I've been seeing a really cool effect recently in the web world. It's the 'layered look'. A user will scroll down the page and the last section will come out under the first few sections of the page. Sometimes it's with an image, but I've found that content can be displayed like this as well.

Now, I'm well familiar with z-index and CSS positioning.

However, I can't seem to get the right combination to make it work the way I would like.

HTML:

<div id="main">Content content content content content content</div>
<div id="revealed-section"></div>

So #main would appear as if it's on top of #revealed-section, and once the user scrolls down to a certain point #reveal-section slides out.

I've done many searches, but I don't know the term for this technique.

Any ideas? I'd prefer a CSS only solution.

---

Here!: http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html I want the transition from slide 3 to 4, but it has to be with content rather than just a background image.

I've found that I also want a footer that looks as if it's initially attached to #main, but when the user scrolls further down, #revealed-section "expands".

One way to do this I'm guessing would be to affix the footer at the bottom of the screen at a certain point. Any tips?

解决方案

The revealed section can be made position:fixed. The placeholder should have a set height, just to extend the page so the user can scroll down and see the revealed fixed div.

HTML

<div id="main">Content content content content content content</div>
<div id="revealed-section-placeholder"></div>
<div id="revealed-section"> Content here </div>

CSS

#main {position:relative; z-index: 1;} 
#revealed-section {position:fixed; bottom: 0;} 

Check it out: http://jsfiddle.net/qYbs7/1/

这篇关于简单视差，CSS图层，在滚动时显示最后一部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！