css - 如何将 css 应用于垂直居中的元素(wordpress)？

Question

首先我会说我对 css 还很陌生，所以如果我的问题的答案很明显，请原谅我。我正在寻找对屏幕最居中的元素应用效果。我希望用户向下滚动并让照片从灰度饱和。

这是我希望效果发生的页面:

http://evanscottpierce.com/portfolio/

当前的桌面行为是在悬停时饱和，但显然这不适用于移动设备，所以我希望通过滚动来触发饱和。正如您在下面看到的，我只是将灰度效果仅应用于桌面，直到我可以为移动设备获得所需的行为。

这是我目前的代码:

@media only screen and (min-width:768px){
    .gray-scale-img .rl-gallery {
      overflow: hidden;
      -webkit-backface-visibility: hidden;
    }
    .gray-scale-img .rl-gallery .rl-gallery-link {
      -webkit-filter: grayscale(100%);
              filter: grayscale(100%);
      -webkit-transition: .3s ease-in-out;
              transition: .3s ease-in-out;
      will-change: filter;
    }
    .gray-scale-img .rl-gallery .rl-gallery-link:hover {
      -webkit-filter: grayscale(0);
              filter: grayscale(0);
    }
}

提前致谢!

Answer 1

使用辅助方法来选择是否应应用 css，然后将 css 应用到类中是非常干净的。

// loop to add sample images
let imageCount = 0;
while (imageCount++ < 10) {
  $('body').append('<p><img src="https://picsum.photos/200/100?image=' + imageCount + '" alt="sample image" class="gray-scale-img" ></p>');
}

// helper function to check for vertical centering
function isScrolledIntoCenter(elem)
{
    var docViewCenter = $(window).scrollTop() + $(window).height() / 2;

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewCenter) && (elemTop <= docViewCenter));
}

// function to toggle .in-color based on visibility
function toggleInColor() {
  const images = $('img.gray-scale-img');

  images.each(function() {
    $(this).toggleClass('in-color',isScrolledIntoCenter(this));
  });
}

toggleInColor();

$(window).on('scroll', toggleInColor);

.gray-scale-img {
  -webkit-backface-visibility: hidden;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  will-change: filter;
}

.gray-scale-img.in-color {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>