Javascript 淡化彩色图像和背景

Question

js 和 html 不是我的强项，但我试图在同一页面上实现两种简化效果。

用户向下滚动页面，随着 div 进入视图然后离开屏幕，背景 image/background 颜色发生变化。

颜色 (.panel class) 效果很好，但图像 (.fadeimage) 根本不起作用。

HTML:

<div class="fadeimage">
  <h2>image panel</h2>
</div>
<div class="panel" data-color="green">
  <h2>Indigo panel</h2>
</div>
<div class="panel" data-color="blue">
  <h2>Blue panel</h2>
</div>
<div class="fadeimage">
  <h2>image panel</h2>
</div>
<div class="panel" data-color="yellow">
  <h2>Yellow panel</h2>
</div>

CSS:

body {
  color: #000;
  background-color: #f4f4f4;
  transition: background-color 1s ease;  
}

.panel {
  min-height: 100vh;
}

.fadeimage {
  opacity: 0;
  transition: 0.3s;
  background-image: url("/New Page/images/testtakeall.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* colours */
.color-blue {
  background-color: #2F8FED;
}
.color-green {
  background-color: #4DCF42;
}
.color-yellow {
  background-color: #FAEB33;
}

JS：已编辑：此函数在包含 $fadeimage.each(...) 时中断...如果我将其删除它会起作用...但显然这意味着没有图像淡入。

    $(window).scroll(function() {

      // selectors
      var $window = $(window),
          $body = $('body'),
          $panel = $('.panel');

      // Change 33% earlier than scroll position so colour is there when you arrive.
      var scroll = $window.scrollTop() + ($window.height() / 3);
$fadeimage.each(function () {
            var $this = $this;
        if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
            $this.css('opacity', 1);
        }
        else {$this.css('opacity', 0)}
        })

      $panel.each(function () {
        var $this = $(this);

        // if position is within range of this panel.
        // So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
        // Remember we set the scroll to 33% earlier in scroll var.
        if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {

          // Remove all classes on body with color-
          $body.removeClass(function (index, css) {
            return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
          });

          // Add class of currently active div
          $body.addClass('color-' + $(this).data('color'));
        }  
    }).scroll();

带有 .fadeimage 作为 class 的 div 的不透明度一直保持在 0...

Answer 1

您不能对同一文档使用两个滚动功能。相反，尝试在一个滚动功能中移动所有内容：

$(window).scroll(function () {
    // Add $fadeimage to these variables
    var $window = $(window),
      $body = $("body"),
      $panel = $(".panel"),
      $fadeimage = $(".fadeimage");

    var scroll = $window.scrollTop() + $window.height() / 3;

    $panel.each(function () {
      var $this = $(this);

      if ( $this.position().top <= scroll && $this.position().top + $this.height() > scroll ) {
        $body.removeClass(function (index, css) {
          return (css.match(/(^|\s)color-\S+/g) || []).join(" ");
        });

        $body.addClass("color-" + $(this).data("color"));
      }
    });

    $fadeimage.each(function () {
      var $this = $this;

      if ( $this.position().top <= scroll && $this.position().top + $this.height() > scroll ) {
        $this.css("opacity", 1);
      } else {
        $this.css("opacity", 0);
      }
    });
}).scroll();

Javascript 淡化彩色图像和背景

Javascript fade coloured images and backgrounds

javascript

css

fadein