将div滚动到视图时更改（淡入/淡出）固定的背景图像

Question

I want to change the fixed background image when scrolling each section (div) into view. 我想在将每个部分（div）滚动到视图时更改固定的背景图像。

The background image should fade out as the user scrolls down and vice-versa. 当用户向下滚动时，背景图像应淡出，反之亦然。 The images are laying on top of another via z-index, so I just need the overlying image to fade out when the section is reached. 这些图像通过z-index放置在另一个图像的顶部，所以我只需要覆盖的图像在到达该部分时淡出即可。

I currently have this working for the first image only but do not know how to trigger the rest. 我目前仅将此图像用于第一个图像，但不知道如何触发其余图像。

I am happy with using javascript. 我对使用javascript很满意。 Here is what I have so far - and it works great - nice and fluid. 这是我到目前为止所拥有的-而且效果很好-美观而流畅。

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

 .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; }

 <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>

Answer 1

If you want the Scroll event to trigger the fade-in or fade-out, then you will have to add an event listener for the "mousewheel" event (for chrome) and "DOMMouseScroll" for firefox. 如果要让Scroll事件触发淡入或淡出，则必须为“ mousewheel”事件（对于chrome）和“ DOMMouseScroll”为firefox添加事件侦听器。 then get the wheel direction from the e.wheelDelta, something like this: 然后从e.wheelDelta获取方向，如下所示：

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

create a variable say, i, then increase or decrease the value of 'i' with delta value , and use the 'i' value to change the opacity of the divs, for eg: 创建一个变量i，然后使用delta值增加或减少'i'的值，并使用'i'值更改div的不透明度，例如：

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

if you want the opacity to change gradually, then do something like: 如果您希望不透明度逐渐变化，请执行以下操作：

    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;

Hope you get the idea. 希望你能明白。

Edit 1: I haven't tested if this is working perfectly based on your requirements. 编辑1：根据您的要求，我尚未测试它是否可以正常工作。 put the below code in the script tag at the bottom of the html page, just above closing body tag. 将以下代码放在html页面底部的script标记中，紧接在body标记上方。

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 个解决方案

解决方案1
0 2017-10-01 18:12:21

将div滚动到视图时更改（淡入/淡出）固定的背景图像

问题描述

1 个解决方案

解决方案1 0 2017-10-01 18:12:21

解决方案1
0 2017-10-01 18:12:21