如何根据滚动位置触发CSS关键帧动画

Question

我想根据用户滚动位置在动画中触发一个圆形渐变。每向下滚动一次，圆圈就会变大。每向上滚动一次，圆圈就会变小。

如果用户不再滚动，动画将停止，因此用户必须滚动几次才能完成动画。如果滚动停止，圆圈将保持一定的宽度(取决于他向上/向下滚动的程度(。

目前我只使用基本的CSS和HTML来运行它。我缺少JS的滚动功能，它会根据用户在后台滚动的程度触发圆圈变大/变小。

.section {
animation: 3s fadeInAnimation reverse;
animation-delay:0s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
background: yellow;
height: 100vh;
}

@keyframes fadeInAnimation {
0% { 
clip-path: circle(75%); 
}
100% { 
clip-path: circle(0%); 
}
}

<div class="section">
<h1>
Section Title
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus. 
</p>
</div>

Fiddle Here

Answer 1

这是使用CSS自定义属性并在滚动窗口时通过JavaScript更新其值的完美场景。

如果我们最初设置以下自定义属性：

• :root { --clip-circle: 0% }

然后我们可以通过以下方式随时更新自定义属性的值：

• 重新计算clipCircleValue
• document.documentElement.style.setProperty('--clip-circle', clipCircleValue);

---

工作示例 (单击整页( ：

const updateClipCircleValue = () => {
let documentScrollHeight = document.documentElement.scrollHeight;
let documentScrollPosition = window.scrollY;
let documentScrollPercentage = ((documentScrollPosition / documentScrollHeight) * 100);
let clipCircleValue = documentScrollPercentage + '%';

document.documentElement.style.setProperty('--clip-circle', clipCircleValue);
}
window.addEventListener('scroll', updateClipCircleValue);

:root {
--clip-circle: 0%;
}
body {
min-height: 400vh;
}
.section {
position: fixed;
top: 0;
left: 0;
background-color: rgb(255, 255, 0);
clip-path: circle(var(--clip-circle));
}

<div class="section">
<h1>
Section Title
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus. 
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus. 
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus. 
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus. 
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus. 
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus. 
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus. 
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus. 
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus. 
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus. 
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus. 
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tincidunt commodo lacus vitae porttitor. Morbi lobortis diam lorem, sed faucibus leo gravida ac. Curabitur ex velit, consectetur vitae ligula in, fringilla tincidunt turpis. Curabitur sem turpis, scelerisque et pretium in, ornare at dui. Morbi pellentesque viverra rhoncus. 
</p>
</div>