褪色的Javascript图像和背景

Question

js和html不是我的强项，但我想在同一个页面上实现两个简单的效果。

用户向下滚动页面，当divs进入视图并离开屏幕时，背景图像背景颜色会发生变化。

颜色(.panel 类）工作得很好，但图像（.fadeimage)根本无法使用。

HTML.CSS

<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.JS: EDITED: 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: EDITED: 这个函数在$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();

不透明度的divs与.fadeimage作为一个类只是保持在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();