如何让网站上的 gif 动画在指定部分/锚点播放？

Question

我想问一下如何在指定部分/锚点保持动画gif开始。

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

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

提前谢谢你:)

Answer 1

您可以测试您想要制作动画的 gif 元素是否在屏幕上可见（取决于屏幕滚动）

这是一个 stackoverflow 帖子，它显示了一个检测元素是否在屏幕上可见的函数：

Check if element is visible after scrolling

代码如下：

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));
}

之后，您可以监听滚动事件，如果元素可见，则为其设置动画。

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