在滾動上繪製/顯示路徑

Question

我需要構建一個響應時間軸，該滾動上的動畫效果。本簡介的一部分是在滾動時顯示路徑 - 路徑是一系列圓形的 -

我需要從左到右顯示圖像是一個具有不透明背景的PNG，因爲還有其他事情發生在底層 - 基本上我被困在一個體面的方法。使用純CSS還是CSS/JS組合可以從左到右顯示不透明的圖像！

Answer 1

純CSS中可能嗎？也許，雖然我懷疑它。

如果我正確理解你的問題，很容易使用CSS/JS。只是顯示圖像，然後調整取決於位置窗口的滾動位置中示出的它的寬度，例如：

$(document).ready(function() { 
    var total_height = $(document).height(); 
    $(window).scroll(function() { 
     var new_width = 100 + (Math.round($(window).scrollTop() * 100/total_height) * 4); 
     $('#wrapper').css('width', new_width + 'px'); 
    }); 
}); 

http://jsfiddle.net/095rmnqd/3/

Answer 2

有了這個代碼

window.onscroll = function (event) { 
    var amount = window.pageYOffset + "px"; 
    document.getElementById("cover").style.left = amount; 
} 

可以實現它。

工作小提琴：Fiddle