基于滚动位置的CSS动画

Question

我正在尝试根据用户的滚动位置为div设置动画。为此，我正在使用一个JavaScript事件侦听器，该事件将动态CSS变量设置为body属性，该变量提供介于0（页面顶部）和1（页面底部）之间的值：

JavaScript：

window.addEventListener('scroll', () => {
  document.body.style.setProperty('--scroll',window.pageYOffset / (document.body.offsetHeight - window.innerHeight));
}, false);

在CSS中，我使用animation-delay来利用该变量：

animation-delay: calc(var(--scroll) * -1s); 

但是，我只想在标题中使用动画，而不是在整个页面中使用。如何将--scroll变量限制为仅限于页面的特定部分？

这是我的动画的Codepen，目前跨越整个身体高度：https://codepen.io/grflu/pen/BazByyj

谢谢。