如何在窗口滚动时逐渐将背景颜色从透明更改为黑色

Question

我正在尝试实现类似于下面视频中的效果，但经过多次搜索后我没有找到任何东西：

https://d.pr/oKFD

我有一个像这样的简单 html：

<div class="item">
<a class="my-img-url-class" href="some-url"><img src="my-url/my-img.jpg" class="img-class"></a>
</div>

我之前所做的一切都是使用下面的代码使其仅在淡入效果中起作用，但这不是我所需要的：

var divs = $('.item');
$(window).on('scroll', function() {
   var st = $(this).scrollTop();
   divs.css({ 'opacity' : (1 - st/350) });
});

我需要一个 div/图像的背景颜色，以便在窗口滚动时逐渐从透明变为黑色。

Answer 1

您不需要 jquery 来实现这一点。这是你应该写的：

function myScroll() {
  var scrolled = document.documentElement.scrollTop; // Firefox & IE
  var SCROLLED = document.body.scrollTop // Chrome, Safari & Opera
  var divs = document.querySelectorAll('.item')
  var opac = 1 - 360 / scrolled;
  var OPAC = 1 - 360 / SCROLLED;
  var i;
  for (i = 0; i < divs.length; i++) {
    divs[i].style.opacity = opac;
    divs[i].style.opacity = OPAC;
  }
}
document.addEventListener("scroll", myScroll);