1

ユーザーがスクロールしたときに画像のさまざまな部分を明らかにする方法を再現しようとしています。このページにはいくつかの例があります: http://apps.npr.org/unfit-for-work/?src=longreads&buffer_share=be155&utm_source=buffer

それはどのように機能しますか？これは私がこれまでに抽出したものです：

h3#image1 {
    background-image: url(story1/1.png);
    display: block;
    padding: 40px 0;
}

html.backgroundsize .wallpaper { 
    background: center center fixed no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
}

そしてHTML：

<h3 id="image1" class="wallpaper">Something</h3>

しかし、これだけでは背景を与えるだけです。背景はスクロールせず、スクロールすると画像の別の部分が表示されます。

4

2 に答える 2

3

background: center center fixed no-repeatfixed添付ファイルの代わりに添付ファイルがありscrollます。scrollページをスクロールすると背景画像が移動するため、画像は「スクロールせず、スクロールしても画像の別の部分が表示されません」。fixedunderbackground:または asを使用background-attachment: fixed;すると、背景画像を「スクロールすると、画像のさまざまな部分が表示される」ようになります。

于 2013-03-31T17:32:01.620 に答える
2

<section> 要素を中心に効果が構築されているようです

HTML

<section>
      <h3 id="hale-county" class="wallpaper">One In Four</h3>
      ...
</section>

CSS

//background image definition
h3#hale-county {
    background-image: url(../img/hale-county-bus-152.jpg);
}

// wallpaper class is assigned to every h3 element within section
html.backgroundsize .wallpaper {
  ////// THIS PROPERTY IS IMPORTANT FOR THE EFFECT
  background: center center fixed no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

@media only all and (max-device-width: 1024px) {
  html.backgroundsize .wallpaper { 
    background-attachment: scroll;
  }
}
于 2013-03-31T17:46:19.900 に答える