Question

我有一个网站，我想在观看者滚动时将图像从黑白变为彩色。图像最初是彩色的，但我使用css过滤器来创建灰度效果。

如何在滚动上实现此效果？我知道当观众将鼠标悬停在图像上时如何创建效果，但我想让它在滚动时更改。

这是我的悬停效果代码：

.contact
    {
    filter: grayscale(100%);
    -webkit-filter:grayscale(100%);
    }

.contact:hover{
    filter: grayscale(0);
  -webkit-filter:grayscale(0);

}

感谢您的帮助！

Answer 1

不确定我是否理解正确，但我认为你想让你的图像在滚动时转动黑白。独立于您在页面上的位置。

Javascript有一个onScroll事件，但每次滚动时都会触发，所以第一次收到此事件时，如果滚动事件没有被触发，请更改为b / w并更改颜色一秒。我使用setTimeout（）来做延迟。

这是一个显示概念的小提琴：https://jsfiddle.net/rzqcwzrh/107/

$("#idOfUl").on( 'scroll', function(){
  if(!$( "#idOfUl" ).hasClass( "red" ))
    $("#idOfUl").addClass("red");
  setTimeout(function(){
    $("#idOfUl").removeClass("red");
  }, 500);
});

Answer 2

为black＆amp;定义一个类白色和另一个颜色：

.contact {
  filter: grayscale(100%);
  -webkit-filter:grayscale(100%);*
}
.contact:hover, .contact-color {
  filter: grayscale(0);
  -webkit-filter:grayscale(0);
}

然后在窗口上添加一个监听器：

var images = document.getElementsByClassName('contact');
var changeFrom = 500; // from which amount of scroll do you want the effect to appear ?

window.addEventListener('scroll', function() {
  if (window.scrollY >= changeFrom ) {
    [].forEach.call(images, function(image) {
      image.classList.add('contact-color');
    });
  }
  else {
    [].forEach.call(images, function(image) {
      image.classList.remove('contact-color');
    });
  }
});

当达到定义的垂直滚动量时，颜色将会改变，如果向上滚动，颜色将恢复。我不知道它是不是你想要的，但你可以根据自己的需要轻松调整它。

如何更改滚动中所有图像的颜色？

2 个答案: