使用滚动在视差上淡出背景图像

Fade out background image on parallax using scroll

本文关键字：淡出 背景 图像 视差 滚动      更新时间：2023-09-26

我正在使用这个视差插件向我的网站添加一些视差滚动背景图像：

http://pixelcog.github.io/parallax.js/

现在我希望图像在用户滚动时淡出，类似于这个网站：

http://fearthegrizzly.com/

我尝试过使用以下代码，但我认为由于插件的工作方式，它并没有逐渐消失：

$(window).scroll(function() {
    $(".parallax-holder").css({
    'opacity' : 1-(($(this).scrollTop())/250)
    });
});

我在这里创建了一支钢笔，这就是我要去的地方：

http://codepen.io/mikehdesign/pen/KVKNyr

如何让图像在用户滚动时淡出？是否需要更改jquery的目标位置？我在页面上有一些视差图像，所以需要能够专门针对一个。如果问题出在这里，我很乐意切换插件。

谢谢！

试试这个朋友：

$(window).scroll(function() {
  $(".parallax-mirror img").css({
    'opacity': 1 - (($(this).scrollTop()) / 250)
  });
});

实际上，您需要更改滚动函数中使用的类名。。。

$(window).scroll(function() {
    $(".parallax-holder").css({
    'opacity' : 1-(($(this).scrollTop())/250)
    });
});
相关文章：