如何保持gif动画在网站上播放在指定的部分/锚

How to hold gif animation on website to play in specified section / anchor?

本文关键字：播放 gif 何保持 动画 网站      更新时间：2023-09-26

我想问一下如何在指定的section/anchor中保持gif动画开始

商品示例:http://www.visaeurope.com/tokenisation/#

我将在垂直部分创建一些动画gif来描述我的工作方案，我担心另一个gif(底部)会在访问者到达他们的部分之前开始循环。

提前感谢:)

你可以测试你想要动画的GIF元素是否在屏幕上可见(取决于屏幕滚动)

这是一个stackoverflow post，显示了一个函数来检测一个元素是否在屏幕上可见:

检查滚动

后元素是否可见

代码如下:

function isScrolledIntoView(elem)
{
var $elem = $(elem);
var $window = $(window);
var docViewTop = $window.scrollTop();
var docViewBottom = docViewTop + $window.height();
var elemTop = $elem.offset().top;
var elemBottom = elemTop + $elem.height();
return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

之后，你可以监听滚动事件，如果元素是可见的，只是动画它。

希望对你有帮助，祝你好运。

相关文章：