Question

我试图弄清楚是否可以使用动态放置的透明标记来创建时间轴（或者更具体地说，在我的情况下，滚动指示器），这样可以让您看到背后的背景图像，但也隐藏/掩盖它所在的时间线。让我向您展示我试图澄清的内容的截图：timeline with transparent markers

所以我有一个时间轴，当用户滚动页面时我会逐渐填写，我想动态地将标记添加到时间线以指示＆＃34;兴趣点＆＃34;。到目前为止，这应该相对容易，但是......这些标记应该模糊/掩盖/剪切时间轴本身（因此你不会看到标记后面的线条）并且同时保持透明，这样你就能够例如，查看背后的图像。

这是否可以结合使用html，css，js / jquery和/或svg？

我已经看到大量的例子，其中标记具有坚实的背景颜色，这与它的背景颜色相同，以创建它是透明的错觉，但是我＆＃39从未见过真正透明的标记。

我非常感谢你们的一些见解，因为我现在很难过。

到目前为止我所拥有的一些代码，以防万一： codepen

JS：

WatchService watchService = FileSystems.getDefault().newWatchService();
opexFolder.register(watchService, StandardWatchEventKinds.ENTRY_CREATE);
docupostFolder.register(watchService, StandardWatchEventKinds.ENTRY_CREATE);

    boolean valid = true;
    do {
        WatchKey watchKey = watchService.take();
        for (WatchEvent<?> event : watchKey.pollEvents()) {
            WatchEvent.Kind kind = event.kind();                
            if (StandardWatchEventKinds.ENTRY_CREATE.equals(event.kind())) {                    
                String fileName = event.context().toString();                   

                //here I want to khow the path of the folder that has 
                // received the ENTRY event 
               String pathToExplore = ??;
              if (pathToExplore has some value) {
                treatments;
              } else {
                other treatments;
                }

            }
        }
        valid = watchKey.reset();

    } while (valid);
}

的CSS：

 $( document ).ready(function() {

        var $progressContElement = $("<div id='progress-cont' class='scroll-indicator-wrap'><div id='progress-bar__timeline' class='progress-bar__timeline'></div></div>");

        // Create the progress bar itself
        var $progressBarElement = $("<div id='progress-bar' class='scroll-indicator progress-bar__timeline'></div>");
        $progressBarElement.css("height", "0%");

        $progressContElement.append($progressBarElement);

        var $locationObject = $("#wrapper-main");
        $locationObject.prepend($progressContElement);

        var poi = $(".scroll-indicator__POI");
        var poiLength = $(".scroll-indicator__POI").length;
        var pracPoiLength = poiLength - 1;
        console.log(poiLength);
        $(poi).each(function(i) {
            console.log(i);
            $progressContElement.append("<div class='progress-bar__timeline-marker'></div>");
            var markerOffset = parseInt((i / pracPoiLength) * 100);
            $(".progress-bar__timeline-marker:eq("+i+")").addClass("test").css("top", markerOffset+"%");
        });

        // Event handler that updates the width of the progress bar based
        // on how far the contentToTrack elemt has been scrolled
        $(window).scroll(function(e){
            var pageHeight = $(window).height();
            var $container = $("#wrapper-main");

            // Adjusted height
            var adjustedHeight = $container.innerHeight() - pageHeight;
            var progress = (($(window).scrollTop() / adjustedHeight) * 100);
            $progressBarElement.css("height", progress + "%");
        });

});

HTML：

 .scroll-indicator__POI {
    height: 100vh;
    background-color: #e7ffdf;
    border-bottom: 1px solid #ccc;
}

.scroll-indicator-wrap {
    position: fixed;
    z-index: 3;
    right: 0;
    height: 100%;
    width: 20px;
}

.progress-bar__timeline {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    background-color: #000;
}

#progress-bar__timeline {
    height: 100%;
}

.scroll-indicator {
    background-color: red;
}

.progress-bar__timeline-marker {
    position: absolute;
    left: -5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid #000;
}

Answer 1

这确实是可能的。

您要做的是在用户滚过标记后，将.progress-bar__timeline-marker替换为已填充/活动的图像。这可以在JS中完成。
为了拥有隐藏红线的完全透明标记，您需要使用CSS masks。您需要两个图像：第一个图像将是一个圆形遮罩，隐藏穿过标记的红线，第二个图像将是实际的活动标记。

z-indexes：line＆lt;隐藏线的圆形面具＆lt;透明标记

纯HTML / CSS无法实现这一点。

时间轴与透明标记

1 个答案: