检测水平动画元素何时到达视口中心

Question

给定一行动画（变换）图像，检测每个图像何时到达中心，以便我们可以进行一些更改（例如，添加像

filter: grayscale

这样的样式）

我已经加入了 IntersectionObserver 并且已经接近了。事实上，我的解决方案在 Firefox 中运行良好，但仅在鼠标移动时才在 Chrome 中运行，而在 Safari 中根本不起作用。即使我调整选项参数行为似乎也是零星的，除非在 Firefox 中。

代码笔

const options = {
  root: document.body,
  rootMargin: '0% -50% 0% -50%',
  threshold: 0,
}

const observer = new IntersectionObserver((entries) => { 
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.style.filter = 'grayscale(0%)'
    } else {
      entry.target.style.filter = 'grayscale(100%)'
    }
  })
}, options)

const items = document.querySelectorAll('.img-container img');
items.forEach(img => observer.observe(img))

Answer 1

使用 requestAnimationFrame() 并使用 elementFromPoint():

找到中心的元素

const wrapper = document.querySelector('.wrapper');
const images = document.querySelectorAll('.wrapper img');

const updateActiveImage = () => {
  const { left, top, width, height } = wrapper.getBoundingClientRect();
  const centerX = left + width / 2;
  const centerY = top + height / 2;

  const imgAtCenter = document.elementFromPoint(centerX, centerY);
  images.forEach(img => img.classList.remove('active'));

  if (imgAtCenter) {
    imgAtCenter.classList.add('active');
  }
  requestAnimationFrame(updateActiveImage);
};

requestAnimationFrame(updateActiveImage);

body {
  background: black;
  margin: 0;
}

.wrapper {
  overflow: hidden;
}

img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  transition: filter 200ms ease-in-out;
  &:not(.active) {
    filter: grayscale(100%);
  }
}

.img-container {
  display: flex;
  gap: 24px;
  animation: marquee 40s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 24px));
  }
}

<div class="wrapper">
  <div class="img-container">
    <img src="https://www.wonderwall.com/wp-content/uploads/sites/2/2020/11/shutterstock_editorial_10552447px.jpg?x=514&y=800&icq=74&sig=639b09155acfa34ee0f71886a1556c55" />
    <img src="https://hips.hearstapps.com/hmg-prod/images/gettyimages-1280266077.jpg" />
    <img src="https://cdn-0.atwoodmagazine.com/wp-content/uploads/2018/01/Chappell-Roan-2018.jpg" />
    <img src="https://e00-marca.uecdn.es/assets/multimedia/imagenes/2022/06/27/16563602316989.jpg" />
    <img src="https://www.expressandstar.com/resizer/SxBF0kXCbz34fI7twkxcDR8Rdi4=/1200x0/cloudfront-us-east-1.images.arcpublishing.com/mna/MWUDEBVNBZBYFAQSYYVPEYATGQ.jpg" />
    <img src="https://parade.com/.image/t_share/MTk3OTcwMTgwMDE2NDQ5MzA5/lindsay-lohan-nyc-2022.jpg" />
    <img src="https://i.pinimg.com/originals/5c/b3/02/5cb302c78b1bb14e57194bdc31e7c502.jpg" />
    <img src="https://s.yimg.com/uu/api/res/1.2/TVnjyBmzZWNlxeO5CvVkfQ--~B/aD0xMjAwO3c9MTIwMDthcHBpZD15dGFjaHlvbg--/https://media.zenfs.com/en/e__181/b609e20726211710ba3bef9a8dba183d" />
    <img src="https://wallpapercave.com/wp/wp4434081.jpg" />
    <img src="https://celebsuburb.com/wp-content/uploads/2024/09/obi-ndefo-death-1.jpg" />
  </div>
</div>