淡入淡出使用CSS滾動文本到圖像 - 幾乎在這裏

我試圖在向頁面頂部滾動時淡入文本。有很多解決方案，但是我找不到一個能在背景圖像出現時工作的解決方案。我確實找到了一支使用mask-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1) 100px);的筆，我試圖修改它以達到我想要的效果。淡入淡出使用CSS滾動文本到圖像 - 幾乎在這裏

我幾乎沒有在此筆：http://codepen.io/jdesilvio/pen/YwKpPp

我只是不能褪色是fixed頁面，而不是與文本滾動的頂部。

這裏是CSS我到目前爲止：

.slab__content { 
    position: relative; 
    overflow: hidden; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    padding: 2rem; 

    // Fade out with mask 
    -webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1) 300px); 
    mask-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,1) 100px); 
    } 

.slab__content:after { 
    position: fixed; 
    content: ""; 
    left: 0px; 
    top: 0px; 
    }

來源

2015-12-02 jdesilvio

就是這個東西，需要無JavaScript來解決呢？ – mrtig

JavaScript的解決方案將會很好！ – jdesilvio

不幸的是，我不認爲CSS已經開發到目前爲止，它可以做到這一點 - [尚]（https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-attachment ）？ –

您將需要一個scroll事件處理程序添加到窗口像這樣（假設你有機會到jQuery的）：

$(window).on("scroll", function(e) { 
    var text = $(".slab__content"); 
    text.css('mask-image', '-webkit-linear-gradient(top, rgba(0,0,0,0) ' + ($('body').scrollTop()-200) + 'px , rgba(0,0,0,1)' +($('body').scrollTop()+300)+'px)'); 
})

這裏我們正在根據主體的滾動位置改變樣式屬性蒙板圖像的定義。

你可以看到這個在這裏的行動（從你的例子分叉）：http://codepen.io/anon/pen/wMwoxQ

來源

2015-12-02 06:18:52 mrtig

淡入淡出使用CSS滾動文本到圖像 - 幾乎在這裏

回答

相關問題