时间戳

首页 > 解决方案 > 当容器在滚动视图中时，有没有办法触发 gif 动画

javascript - 当容器在滚动视图中时，有没有办法触发 gif 动画

问题描述

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

标签： javascripthtmlcsscss-animations

解决方案

您可以在每个这样的 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" />

推荐阅读