간단한 시차, CSS 레이어, 스크롤 할 때 마지막 섹션 표시

Question

저는 최근에 웹 세상에서 정말 멋진 효과를보고 있습니다. 그것은 '계층화 된 모양'입니다. 사용자가 페이지를 아래로 스크롤하면 마지막 섹션이 페이지의 처음 몇 섹션 아래로 나옵니다. 때로는 이미지가있는 경우도 있지만 콘텐츠가 이와 같이 표시 될 수 있음을 발견했습니다.

이제는 z-index 및 CSS 위치 지정에 대해 잘 알고 있습니다.

그러나 나는 원하는대로 작동하도록 올바른 조합을 얻는 것처럼 보이지 않습니다.

HTML :

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

이 #revealed-section의 상단에, 그리고 사용자가 스크롤 번 #reveal-section 슬라이드 아웃 특정 지점까지 것처럼 그래서 #main가 나타납니다.

많은 검색을했는데이 기술에 대한 용어를 모르겠습니다.

아이디어가 있으십니까? CSS 전용 솔루션을 선호합니다. 여기! :

---

http://webdesigntutsplus.s3.amazonaws.com/tuts/338_parallax/src/index.html 내가 4 슬라이드 3으로의 전환을 원하지만 그것은 단지 배경 이미지보다는 내용과 함께하고 있습니다.

나는 처음에 #main에 연결된 것처럼 보이지만 사용자가 더 아래로 스크롤하면 #revealed-section이 "펼치기"하는 꼬리말을 원한다는 것을 발견했습니다.

한 가지 방법은 특정 지점에서 화면 하단에 꼬리말을 붙이는 것입니다. 어떤 팁?

Answer 1

공개 된 섹션은 position: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;} 

그것을 체크 아웃 : http://jsfiddle.net/qYbs7/1/