jquery - 如何在滚动时更改同一 div 的背景图像

Question

我需要在滚动时更改 div 的背景图像喜欢这个site

Answer 1

使用这个简单的 html 布局:

<div class="background x1"></div>
<div class="background x2"></div>
<div class="content"></div>

和这个 CSS:

body, html, div {
  height: 100%;
  margin: 0;
}
.content {
  height:1500px;
}
.x1 {
  background-image: url(https://i.ytimg.com/vi/ETDz5z46Loo/maxresdefault.jpg);
}
.x2 {
  background-image: url(http://www.neyralaw.com/wp-content/uploads/2012/07/tokyo-blue-background-4547.jpg);
}
.background {
  background-size:cover;
  height:100%;
  width:100%;
  position:fixed;  
}

您的网络中有 2 个背景图像，始终覆盖整个窗口，一个在另一个之上。

content 是你 future 元素的容器，我只给它 1500px 的高度，这样就会显示一个滚动条。

然后，使用这个简单的 jquery:

var change = $('.x2');
$(window).on('scroll', function () {
  var op = $(this).scrollTop();
  change.css({
    'opacity': (1 - op / 100)
  });
});

您将使 x2 图像逐渐改变其不透明度，从无滚动时的 1 到 100px 滚动时的 0。

这比在固定滚动点更改图像要好，即使您添加了过渡以使其流畅。

JSFIDDLE

var change = $('.x2');
$(window).on('scroll', function () {
  var op = $(this).scrollTop();
  change.css({
    'opacity': (1 - op / 100)
  });
});

body, html, div {
  height: 100%;
  margin: 0;
}
.content {
  height:1500px;
}
.x1 {
  background-image: url(https://i.ytimg.com/vi/ETDz5z46Loo/maxresdefault.jpg);
}
.x2 {
  background-image: url(http://www.neyralaw.com/wp-content/uploads/2012/07/tokyo-blue-background-4547.jpg);
}
.background {
  background-size:cover;
  height:100%;
  width:100%;
  position:fixed;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="background x1"></div>
<div class="background x2"></div>
<div class="content"></div>

EDITED: second aproach

在固定滚动位置转换和更改图像的更简单方法可能是使用此脚本:

$(window).scroll(function () {
      if ($(window).scrollTop() > 200) {
        $(".x4").addClass("opacity");
      } else {
        $(".x4").removeClass("opacity");
      }
      if ($(window).scrollTop() > 400) {
        $(".x3").addClass("opacity");
      } else {
        $(".x3").removeClass("opacity");
      }
      if ($(window).scrollTop() > 600) {
        $(".x2").addClass("opacity");
      } else {
        $(".x2").removeClass("opacity");
      }
  });

将 200、400 和 600 像素滚动到图像容器时添加类的位置:

.opacity {
  opacity: 0
}

JSFIDDLE

$(window).scroll(function () {
      if ($(window).scrollTop() > 200) {
        $(".x4").addClass("opacity");
      } else {
        $(".x4").removeClass("opacity");
      }
      if ($(window).scrollTop() > 400) {
        $(".x3").addClass("opacity");
      } else {
        $(".x3").removeClass("opacity");
      }
      if ($(window).scrollTop() > 600) {
        $(".x2").addClass("opacity");
      } else {
        $(".x2").removeClass("opacity");
      }
  });

body,
html,
div {
  height: 100%;
  margin: 0;
}

.content {
  height: 1500px;
}

.x1 {
  background-image: url(https://i.ytimg.com/vi/ETDz5z46Loo/maxresdefault.jpg);
}

.x2 {
  background-image: url(http://www.neyralaw.com/wp-content/uploads/2012/07/tokyo-blue-background-4547.jpg);
}

.x3 {
  background-image: url(http://awalls.xyz/wp-content/uploads/2015/11/free-backgrounds-for-desktop-2BE.jpg);
}

.x4 {
  background-image: url(http://fewfice.com/dcim/llp/22/4363196-hd-background.jpg);
}

.background {
  background-size: cover;
  height: 100%;
  width: 100%;
  position: fixed;
  transition: all 1s ease;
  opacity:1;
}

.opacity {
  opacity: 0
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="background x1"></div>
<div class="background x2"></div>
<div class="background x3"></div>
<div class="background x4"></div>
<div class="content"></div>