2

短い質問: css でこのスクロール効果を実現するにはどうすればよいですか? ->

http://focuslabllc.com/

私はすでにこれを試しました：

#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;
}

ありがとう！:)

4

2 に答える 2

4

わかりました、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は結果を示しています。

于 2013-10-28T15:18:15.983 に答える