圖像效果，CSS

我試圖重新創建一種方式，當用戶滾動時顯示圖像的不同部分。本頁有幾個例子：http://apps.npr.org/unfit-for-work/?src=longreads&buffer_share=be155&utm_source=buffer 圖像效果，CSS

它是如何工作的？這是我迄今提取：

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>

但僅僅只會給它的背景。背景滾動時不會滾動顯示圖像的不同部分。

來源

2013-03-31 C. E.

你見過'背景附件'身邊？這個頁面上有很多div。 – Mooseman

圖像看起來是h3元素的背景圖像。據我所知，這些元素不使用背景附件。 –

這是視差不是嗎？ http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/ – btevfik

background: center center fixed no-repeat有fixed附件而不是scroll附件。 scroll將在您滾動頁面時移動背景圖像，以便圖像「在滾動時不會滾動並顯示圖像的不同部分」。在background:或下使用fixed將允許背景圖像「在滾動經過它時顯示圖像的不同部分」。

來源

2013-03-31 17:32:01 Mooseman

看起來效果是建立<部分>元素

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-31 17:46:19 anazimok

圖像效果，CSS

回答

相關問題