Как применить 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

Самый простой способ - это использование css3 flexbox:

<div class="flex-container">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
   <div>Six</div>
   <div>Seven</div>
   <div>Eight</div>
   <div>Nine</div>
</div>

<style type="text/css">
.flex-container {
   display:flex;
   height: 200px;
   align-items: center;
}
</style>

Answer 2

Использование вспомогательного метода для выбора, следует ли применять 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>