在滚动上绘制/显示路径

Question

我需要构建一个响应时间轴，以动画滚动。这个简报的一部分是在滚动时显示一条路径 - 路径是一系列圆圈，如下所示 -

我需要从左到右透露，图像是一个背景不透明的PNG，因为下面的玩家还有其他事情发生 - 基本上我很难接受一个体面的方法。是否可以使用纯CSS或CSS / JS组合从左到右显示不透明图像？

Answer 1

使用此代码

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

你可以实现它。

工作小提琴：Fiddle

Answer 2

纯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/