Question

目前，我有一张灰度图像直到悬停，然后它变成全彩色。我用这个CSS实现了这个效果，我在另一篇文章中找到了这个。

img.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>
  <filter      id=\'grayscale\'>
  <feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0    0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/>
  </filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
   }

img.grayscale:hover {
 filter: none;
 -webkit-filter: grayscale(0%);
}

但是现在我希望图像保持灰度，直到用户在我的一个寻呼机网站上滚动它的部分时进入视图。然后，当用户滚动浏览图像时，它将再次淡入灰度级。

基本上，www.hubspot.com's营销平台和销售平台部分的效果完全相同。我怎么能达到这个效果？

非常感谢你的帮助。

Answer 1

您可以这样做：

var offset = 100;

$(window).scroll(function(){

    var $elem = $(".magic"),
        topDist = $elem.offset().top - $(this).scrollTop(),
        bottomDist = $elem.offset().top + $elem.height() - $(this).scrollTop();

    if (topDist < offset && bottomDist > offset) {
        // (turn on colors)
        $elem.css("background-color","red");
    } else {
        // (turn off colors)
        $elem.css("background-color","gray");
    }
});

jsFiddle

或者，为了获得更好的结果，您可能需要将元素的底部与视口的底部进行比较。 This answer可能有帮助。

将灰度样式应用于图像，直到它滚动到视图中心

1 个答案: