有没有办法在容器处于滚动视图时触发 gif 动画

Question

我在一个基本的 HTML CSS 网站上有几个 gif 动画，我想知道是否有办法在滚动视图中触发 gif 并播放一次。我正在使用 scrollMagic 制作其他动画，但我似乎无法很好地控制 gif 动画。我不太熟悉我需要监听或跟踪事件监听器以在滚动时播放或绑定 gif 控件的属性。如果有任何示例可以解释使用 gif 结合屏幕视图或滚动的类似情况，请告诉我，谢谢！

Answer 1

您可以在每个这样的 gif 上放置一个 IntersectionObserver，当它在视口中可见时为其提供正确的 src，当它离开视口时删除 src。这将确保它在重新出现时再次播放。

 function callback(entries) {
   for (let i = 0; i < entries.length; i++ ) {
    entries[i].target.src = (entries[i].isIntersecting) ? entries[i].target.getAttribute('data-src') : "";
   }
}
const gifs = document.querySelectorAll('.gif');
const observer = new IntersectionObserver(callback);
for (let i = 0; i < gifs.length; i++) {
  observer.observe(gifs[i]);
}

.gif {
  position: relative;
  top: 150vh;
  min-width: 1px;
  min-height: 1px;
  width: 20vh;
  height: auto;
}

<img src="" class="gif" data-src="https://i.stack.imgur.com/jBSrY.gif" />

有没有办法在容器处于滚动视图时触发 gif 动画

is there a way to trigger a gif animation when the container is in the scroll view

html

javascript

css

css-animations