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

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

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