具有块颜色属性的滚动动画不起作用

Question

想在移动设备上滚动窗口时制作动画效果。 列表的每个元素都带有 css 属性 filter: grayscale(100%); 当它们到达屏幕中心时，我想用属性filter: grayscale(0%); 制作它们。 我在互联网上发现了一些类似的东西，但我认为这不起作用（（（

这是幸运的例子

$(window).on("load",function() {
  $(window).scroll(function() {
    var windowBottom = $(this).scrollTop() + $(this).innerHeight();
    $(".fade").each(function() {
      /* Check the location of each desired element */
      var objectBottom = $(this).offset().top + $(this).outerHeight();
      
      /* If the element is completely within bounds of the window, fade it in */
      if (objectBottom < windowBottom) { //object comes into view (scrolling down)
        if ($(this).css("opacity")==0) {$(this).fadeTo(500,1);}
      } else { //object goes out of view (scrolling up)
        if ($(this).css("opacity")==1) {$(this).fadeTo(500,0);}
      }
    });
  }).scroll(); //invoke scroll-handler on page-load
});

.fade {
  margin: 50px;
  padding: 50px;
  background-color: lightgreen;
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="fade">Fade In 01</div>
  <div class="fade">Fade In 02</div>
  <div class="fade">Fade In 03</div>
  <div class="fade">Fade In 04</div>
  <div class="fade">Fade In 05</div>
  <div class="fade">Fade In 06</div>
  <div class="fade">Fade In 07</div>
  <div class="fade">Fade In 08</div>
  <div class="fade">Fade In 09</div>
  <div class="fade">Fade In 10</div>
</div>

这是我的版本

window.addEventListener("scroll", () => {
    var windowBottom = $(this).scrollTop() + $(this).innerHeight();
    $(".slider__item img").each(function() {
      /* Check the location of each desired element */
      var objectBottom = $(this).offset().top + $(this).outerHeight();
      /* If the element is completely within bounds of the window, fade it in */
      if (objectBottom < windowBottom) { //object comes into view (scrolling down)
        $(this).css({
          '-webkit-filter': 'grayscale(0%)', 
          'filter': 'grayscale(0%)'
         })
      }
    });
  });

    .ourpartner.slider {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .ourpartner.slider .slider__item {
        margin-top: 30px;
    }
    .ourpartner.slider .slider__item img {
        width: 130px;
    }
    ._rehau,
    ._openteck {
        height: 70px !important;
    }
    .ourpartners .slider__item img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: 0.6s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="ourpartners">
    <div class="container">
        <div class="ourpartner slider">
            <div class="slider__item">
                <img src="https://i.ibb.co/PF6SC3p/wds2.png" alt="">
            </div>
            <div class="slider__item">
                <img src="https://i.ibb.co/z2hrmwt/bikha.png" alt="">
            </div>
            <div class="slider__item">
                <img class="_rehau" src="https://i.ibb.co/v1SHw10/rehau.png" alt="">
            </div>
            <div class="slider__item">
                <img src="https://i.ibb.co/NKYBNHP/wiknar.png"" alt="">
            </div>
            <div class="slider__item">
                <img class="_openteck" src="https://i.ibb.co/BKpqdxM/openteck.png" alt="">
            </div>
            <div class="slider__item">
                <img src="https://i.ibb.co/4KXMFmm/maco.png" alt="">
            </div>
            <div class="slider__item">
                <img src="https://i.ibb.co/bNn42TQ/siegenia.png" alt="">
            </div>
            <div class="slider__item">
                <img src="https://i.ibb.co/5sNsXgq/axor.png" alt="">
            </div>   
        </div>
    </div>
</section>

我知道我做了相反的事情）

Answer 1

我将您的代码更新如下：

我从更改 CSS 更改为切换类。当您反转滚动时，此代码也会切换回灰度。

同样在加载时，我会遍历图像，检查是否有任何可见并切换同一类，以便可见图像变为彩色。

var windowBottom = $(window).scrollTop() + $(window).innerHeight();
$(".slider__item img").each(function() {
    var objectBottom = $(this).offset().top + $(this).outerHeight();
    $(this).toggleClass("addColor",(objectBottom < windowBottom));
});

window.addEventListener("scroll", () => {
    var windowBottom = $(this).scrollTop() + $(this).innerHeight();
    $(".slider__item img").each(function() {
      var objectBottom = $(this).offset().top + $(this).outerHeight();
      $(this).toggleClass("addColor",(objectBottom < windowBottom));
    });
  });

.ourpartner.slider {
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .ourpartner.slider .slider__item {
        margin-top: 30px;
    }
    .ourpartner.slider .slider__item img {
        width: 130px;
    }
    ._rehau,
    ._openteck {
        height: 70px !important;
    }
    .ourpartners .slider__item img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: 0.6s;
}

.addColor{
    -webkit-filter: grayscale(0) !important;
    filter: grayscale(0) !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="ourpartners">
    <div class="container">
        <div class="ourpartner slider">
            <div class="slider__item">
                <img src="https://i.ibb.co/PF6SC3p/wds2.png" alt="">
            </div>
            <div class="slider__item">
                <img src="https://i.ibb.co/z2hrmwt/bikha.png" alt="">
            </div>
            <div class="slider__item">
                <img class="_rehau" src="https://i.ibb.co/v1SHw10/rehau.png" alt="">
            </div>
            <div class="slider__item">
                <img src="https://i.ibb.co/NKYBNHP/wiknar.png"" alt="">
            </div>
            <div class="slider__item">
                <img class="_openteck" src="https://i.ibb.co/BKpqdxM/openteck.png" alt="">
            </div>
            <div class="slider__item">
                <img src="https://i.ibb.co/4KXMFmm/maco.png" alt="">
            </div>
            <div class="slider__item">
                <img src="https://i.ibb.co/bNn42TQ/siegenia.png" alt="">
            </div>
            <div class="slider__item">
                <img src="https://i.ibb.co/5sNsXgq/axor.png" alt="">
            </div>   
        </div>
    </div>
</section>