Question

我想在将每个部分（div）滚动到视图中时更改固定的背景图像。

当用户向下滚动时，背景图像应淡出，反之亦然。图像通过z-index放在另一个上面，所以我只需要覆盖图像就可以在到达该部分时淡出。

我目前只对第一张图片有效，但不知道如何触发其余图像。

我很高兴使用javascript。这就是我到目前为止所做的 - 而且效果很好 - 很好且流畅。

＆＃13;

$(window).scroll(function() {
  $("#bg").css("opacity", 1 - $(window).scrollTop() / $("#bg").height());
});

＆＃13;

.divOne {
  height: 2000px;
}

.divTwo {
  height: 2000px;
}

.divThree {
  height: 2000px;
}

.divFour {
  height: 2000px;
}

.backgrounds {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.bg1 {
  background-image: url("http://techespresso.ca/assets/images/bg/whiteHouseStreet.gif");
  z-index: 4;
}

.bg2 {
  background-image: url("http://techespresso.ca/assets/images/bg/techespresso.jpg");
  z-index: 3;
}

.bg3 {
  background-image: url("http://techespresso.ca/assets/images/bg/techespresso_1.jpg");
  z-index: 2;
}

.bg4 {
  background-image: url("http://techespresso.ca/assets/images/bg/techespresso_2.jpg");
  z-index: 1;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<HTML>

<head>
  <title>Fade Fixed Images</title>
</head>

<body>
  <div class="divOne">Div-One</div>
  <div class="divTwo">Div-Two</div>
  <div class="divThree">Div-Three</div>
  <div class="divFour">Div-Four</div>

  <div class="backgrounds bg" id="bg"></div>
  <div class="backgrounds bg2" id="bg2"></div>
  <div class="backgrounds bg3" id="bg3"></div>
  <div class="backgrounds bg4" id="bg4"></div>
</body>

</HTML>

＆＃13;

Answer 1

如果您希望Scroll事件触发淡入或淡出，则必须为＆＃34; mousewheel＆＃34;添加事件监听器。事件（对于chrome）和＆＃34; DOMMouseScroll＆＃34;对于Firefox。然后从e.wheelDelta获取方向盘，如下所示：

var delta = evt.detail ? evt.detail  : evt.wheelDelta;

创建变量说，我，然后增加或减少＆＃39; i＆＃39;使用delta值，并使用＆＃39; i＆＃39;值来改变div的不透明度，例如：

  if (i >= 0 && i<= 3) {
    document.querySelector('.bg1').style.opacity = 1;
    document.querySelector('.bg2').style.opacity = 0;
    document.querySelector('.bg3').style.opacity = 0;
   }

如果您希望不透明度逐渐变化，请执行以下操作：

    document.querySelector('.bg1').style.opacity = (0.3-(0.1*i))*
    (1/(0.1*3));
    document.querySelector('.bg2').style.opacity = (0.1*i)*(1/(0.1*3));;
    document.querySelector('.bg3').style.opacity = 0;

希望你明白这一点。

编辑1：我没有根据您的要求测试它是否完美运行。将以下代码放在html页面底部的脚本标记中，就在关闭正文标记的上方。

var i=0;

var myFunc = function(e){
var evt = window.event || e ;
var delta = evt.detail ? evt.detail * (-1) : evt.wheelDelta;

if (delta < 0)
        i=i+(0.2); //apply your own increment value based on i
      if ((delta > 0 && i > 0)
        i=i-(0.2); //apply your own decrement value based on i

document.querySelector('.bg1').style.opacity = i;

document.querySelector('.bg2').style.opacity = 1-i;//apply your own formula 
document.querySelector('.bg3').style.opacity = 0;
}

document.addEventListener("mousewheel",myFunc,false);

将div滚动到视图

1 个答案: