更改進度條在背景中傳遞時svg的填充

我有一個進度條，當用戶向下滾動超過100個像素時，該進度條會下降。進度條的背景填充紅色。進度條容器還包含一個白色的樹的svg。更改進度條在背景中傳遞時svg的填充

如何在進度條通過後更改svg的填充顏色。所以，如果進度條在樹的後半部分，左半部分將是白色的，右半部分仍然是紅色的。這甚至有可能嗎？我目前正在使用jQuery。

這裏我嘲笑了快筆：http://codepen.io/redbranchmedia/pen/aGfme

這裏是我使用進度條腳本：

// fills progress bar on scrolldown 

jQuery(document).on('ready', function() { 
    var winHeight = $(window).height(), 
     docHeight = $(document).height(), 
     progressBar = $('progress'), 
     max, value; 

    /* Set the max scrollable area */ 
    max = docHeight - winHeight; 
    progressBar.attr('max', max); 

    jQuery(document).on('scroll', function(){ 
    value = $(window).scrollTop(); 
    progressBar.attr('value', value); 
    }); 
}); 
// end progress bar

來源

2014-10-04 jphogan

你幾乎沒有。在白樹後面使用紅樹是一種動畫技巧。所以當白色的樹被揭開時，紅色的樹就會出現。

Earlier revision回答這個問題，但它不是100％像素準確的各種窗口寬度和窗口縮放（可以用更多的數學來解決它）。因此下面這個新的更新。

更新：新codepen示例使用漸變逐漸將其變爲白色。如果您想稍後變成白色，請調整0.1的值(max*0.1)

來源

2014-10-04 03:26:16

非常感謝您花時間回覆並嘲笑它。我喜歡你在那裏做的。這不是我正在尋找的東西（我所尋找的東西可能甚至不可能）。當進度條在樹後面時，我希望與進度條重疊的樹的任何部分都是白色的，並且樹的任何部分都不重疊，仍然像下面這樣是紅色的：http://i.imgur.com /9eE9QEP.png。再次感謝！ – jphogan 2014-10-06 16:44:42

在早期版本中更新了我的答案。 – 2014-10-06 19:03:05

再次感謝！我想知道那個codepen去了哪裏。 :)我以爲我瘋了。我看到你的縮放級別等等，但這是一個很棒的開始 – jphogan 2014-10-07 20:48:51

更改進度條在背景中傳遞時svg的填充

回答

相關問題