在滚动上绘制/显示路径

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/