在滚动上绘制/显示路径

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