Question

这可能以前曾被问过，但是我在图像滑块上部署的视差效果存在问题。滚动时，滑块中使用的背景图像会调整其位置和不透明度。

问题是，如果我在页面上向下滚动一小段然后刷新页面，背景位置和不透明度会恢复为原始值，因此滚动会导致跳转，以使他们“追赶”其实际值应该是。

无论页面刷新时页面处于什么位置，我都试图弄清楚如何自动设置值。

这是我目前拥有的代码

//HomepageParallaxFade
window.addEventListener('scroll', function () {
  var scrollPosition = window.pageYOffset;
  var bgParallax = document.getElementsByClassName('carousel-cell');
  Array.prototype.forEach.call(bgParallax, function (el) {
    var limit = el.offsetTop + el.offsetHeight;
    if (scrollPosition > el.offsetTop && scrollPosition <= limit) {
      el.style.backgroundPositionY = (50 + 90 * scrollPosition / limit) + '%';
      el.style.opacity = (1 - 1 * scrollPosition / limit);
    } else {
      el.style.backgroundPositionY = '50%';
    }
  })
});

如有必要，很高兴提供JSFiddle。感谢所有帮助

Answer 1

您可以使用纯CSS进行视差。

https://www.digitalocean.com/community/tutorials/css-pure-css-parallax。

从那里开始，如果您刷新并使用javascript设置滚动位置，则视差将正常工作。

页面刷新后初始化视差位置值

1 个答案: