Javascript触发器(进度条)在屏幕上时

Question

我目前正在为学校制作自己的 1 页作品集网站，我有一个很酷的想法，我想通过使用进度条来展示我在某些编码语言中走了多远，例如，C# = 60%，这将是圆圈的 60%。 我想我可以使用互联网做到这一点，但我希望它在向下滚动时从 60 开始/结束，它应该开始进度条，当它在屏幕上。我不知道也找不到当屏幕上可见(在本例中为进度条(时如何触发代码。

注意：我是一个相当新的JavaScript程序员和一个相当新的用户，所以请解释我是否做错了什么。

Answer 1

下面是使用交叉观察器 API 滚动到图像高度的 75% 时触发动画的工作示例：

const images = document.querySelectorAll('.animate-me');
const config = {
root: null, // viewport
rootMargin: '0px',
threshold: 0.75
};
let observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.intersectionRatio >= config.threshold) {
entry.target.classList.add("active");
}
});
}, config);
images.forEach(image => {
observer.observe(image);
});

.spacer {
height: 400px;
}
.animate-me.active {
animation: anim1 .7s ease-out;
}
@keyframes anim1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

<div class="spacer">(Scroll down)</div>
<img src="https://picsum.photos/200" class="animate-me">
<div class="spacer"></div>

您应该能够将其转换为您自己的用例，但如果您正在寻找其他内容，请分享更多细节。