페이지를 아래로 스크롤 할 때 div를 위로 밀어서 내용을 표시하십시오.

Question

http://icscreative.com/#home 사이트에서 효과를 얻으려고합니다. 사이트의 맨 위로 스크롤하면 배경 이미지가있는 div가 나타나고 전체 화면을 덮습니다. 그런 다음 아래로 스크롤하면 들어 올려지며 뒤쪽으로 내용을 드러내지 만 뒤쪽에 위치합니다.

어떻게 달성되는지 이해하는 데 어려움이 있습니다. 지금까지 필자는 내용을 담고있는 .mainContent라는 상대적 위치로 div를 만들었다. div의 전체 위치를 커버 할 수 있도록 background image와 top과 left가있는 .slide라는 절대 위치로 div를 배치했습니다.

jQuery가 사용되고 있다고 상상해 봅니다. 그러나 어떻게해야할지 모르겠습니다. 필자의 초기 생각은 시차 였지만 동시에 텍스트가 화면 하단에서 위로 스크롤되는 것을 원하지 않는다. 나는 그것이 .slide div 뒤에 제자리에 남아 있기를 원한다. 이것은 순전히 CSS입니까?

미리 감사드립니다.

Raheel K.

편집 : 여기에 지금까지 무슨이다. #blogHeader는 #blog 위에 표시되지만 두 div를 모두 아래로 스크롤하면 다른 쪽 위로 이동합니다. 또한 셀렉터의 이름을 변경했습니다.

HTML

<div id="blog"> 

<div id="blogHeader"></div> 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia ultrices commodo. Pellentesque dictum consequat nulla, quis elementum ante ornare vel. Nunc non lacus eget diam rutrum tincidunt. Suspendisse vel turpis est. Nulla sit amet libero tellus. Etiam consequat quam rhoncus mauris cursus porta. In hac habitasse platea dictumst. Aliquam sollicitudin aliquet enim nec blandit. Vivamus faucibus, justo mattis euismod porttitor, metus tellus pulvinar velit, ac rutrum urna lorem id magna. Vestibulum diam lectus, pharetra nec pulvinar a, imperdiet at magna. Ut a pellentesque elit.</p> 

</div> 

CSS

#blogHeader{ 
    position: absolute; 
    width:100%; 
    height: 700px; 
    background:url(media/images/image.jpg) no-repeat fixed 50% 50%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    z-index: 1; 
} 

#blog{ 
    position: relative; 
    z-index: 0; 
} 

편집 2 : 내가 할 노력하고있어 더 나은 아이디어와 나는 데 문제를주고 jsFiddle 게시. http://jsfiddle.net/rHg9d/

Answer 1

각 부품의 Z- 색인을 조정하고 싶습니다. 자신의 사이트에서 "요소 검사"를하면 div라는 클래스 이름이 "커튼"임을 알 수 있습니다. 각 "커튼"은 스크롤하는 다른 부분입니다. 또한 예를 들어, 배경에있는 비행 거리 사진에는 z- 색인 1이 있고 페이지에서 스크롤되는 모든 것들은 z- 색인 3이라는 점을 알 수 있습니다. 이는 그들이 blimp div의 "상단"에 있음을 의미합니다. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index

명확하지 않은 경우 게시 할 수 있습니다.

Answer 2

이러한 효과를 "시차"라고도합니다. 실제로 JS는 그것을 향상시킬 수 있지만 실제로는 매우 간단하고 CSS만으로 수행 할 수 있습니다. 기본 아이디어는 div에 배경 이미지를 설정하고 위치를 fixed으로 설정하는 것입니다. 당신은, 그러나, 그들은이 방법을 사용하지 않는 링크 된 사이트의 경우 http://www.pmob.co.uk/temp/parrallax2.htm

하지만 순수한 JS 방법 :

background: url(img.jpg) no-repeat fixed 50% 50%; 

여기에 간단한 데모입니다. 빠른 눈길에서 그들은 Scrollax를 사용하고있을 것입니다. https://github.com/karlbright/scrollax