Javascript выцветание цветных изображений и фонов - PullRequest
Новая
       3

Javascript выцветание цветных изображений и фонов

1 голос
/ 17 июня 2020

js и html не являются моей сильной стороной, но я пытаюсь добиться двух простых sh эффектов на одной странице.

Пользователь прокручивает страницу вниз, и фоновое изображение / цвет фона меняется по мере того, как div-ы появляются в поле зрения, а затем покидают экран.

Цвета (.panel класс) работают отлично, но изображение (.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: 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();

Непрозрачность div с .fadeimage как класс просто остается на 0 все время ...

1 Ответ

0 голосов
/ 17 июня 2020

Вы не можете использовать две функции прокрутки для одного и того же документа. Вместо этого попробуйте переместить все с помощью одной функции прокрутки: 

$(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();
...