고정 배경 스크롤 효과

Question

간단한 질문 : CSS로이 스크롤 효과를 얻으려면 어떻게해야합니까?

#one { 
    background: url(http://images.buzzillions.com/images_products/07/02/iron-horse- maverick-elite-mountain-bike-performance-exclusive_13526_100.jpg); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-attachment:fixed; 
} 

#two { 
    background: url(http://img01.static-nextag.com/image/GMC-Denali-Road-Bike/1/000/006/107/006/610700673.jpg); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-attachment:fixed; 
} 

감사합니다 : ->

http://focuslabllc.com/

는 이미이 시도! :)

Answer 1

"커튼 공개"라고 불리지 만 그 반대의 경우입니다. http://www.thecssninja.com/css/reveal-effect

본질적으로 최초의 "슬라이드" "아래의"다른 모든 내용에 위치하고 있으며 position: fixed로 설정 z-index: 1 말을 모든 다른 position: relative로 설정하고 코드에서 이렇게 z-index: 10

http://jsfiddle.net/3n1gm4/8gDDy/

되어 그 것

HTML

<div class="slide1">CONTENT</div> 
<div class="slide2">CONTENT</div> 

CSS

.slide1 { 
    position: fixed; 
    z-index: 1; /* sets it below the other slides in the layer stack */ 
    height: 100% 
} 
.slide2 { 
    position: relative; 
    z-index: 10; /* sets it above .slide1 */ 
    margin-top: 100%; /* this pushes it below .slide1 in the scroll */ 
    height: 100% /* full length slides */ 
} 

*이 신속하게 이루어 아마 100 % 정확하지만 거기에가는 무슨에 대해 당신에게 기본 아이디어를 제공하도록했다.

Answer 2

좋아, 그냥 CSS로 할 수 있습니다.

HTML

<div class="main">Sample text/div> 
<div class="reveal-me-holder"></div> 
<div class="reveal-me">Revealed</div> 

CSS

body { 
    margin:0; 
} 
.main { 
    height: 700px; 
    position:relative; 
    z-index: 2; 
    background: red; 
} 
.reveal-me { 
    height: 500px; 
    position:fixed; 
    bottom:0; 
    width:100%; 
    background: black; 
    color:white; 
} 
.reveal-me-holder { 
    height: 500px; 
} 

이 jsfiddle는 결과를 보여줍니다.