大佬教程收集整理的这篇文章主要介绍了当容器在滚动视图中时，有没有办法触发 gif 动画，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我在一个基本的 HTML CSS 网站上有几个 gif 动画，我想知道是否有办法在滚动视图中触发 gif 并播放一次。我正在使用 scrollMagic 制作其他动画，但我似乎无法很好地控制 gif 动画。我不太熟悉我需要监听或跟踪事件监听器以在滚动时播放或绑定 gif 控件的属性。如果有任何示例使用 gif 结合屏幕视图或滚动来解释类似情况，请告诉我，谢谢！
你可以在每个这样的 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 动画全部内容，希望文章能够帮你解决当容器在滚动视图中时，有没有办法触发 gif 动画所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。