滚动到视图

时间:2018-02-02 17:22:47

标签: javascript css scroll gif js-scrollintoview

当我向下或向上滚动时,我想从头开始“重启”一个gif,然后回到视野中。

例如,例如,我的页面加载,动画开始 - >我向下或向上滚动 - >我带着gif回到了div,gif已被重置。

我在codepen中找到了这个很棒的js,当我滚动到顶部然后回来时它工作得很好,但是当我向下滚动并返回时它不起作用。

https://codepen.io/anon/pen/aWvagO?editors=0010 代码如下所示:

$(window).scroll(function() {

  var current = $(this).scrollTop(),
  path = '//cdn.pbrd.co/images/5QABxgAp7.gif',
  visible = $('img').css('opacity') != 0;

  if (current > 200) {
  if (!visible) $('img').attr('src', path).fadeTo(400,1);
  }
  else if (visible) $('img').fadeTo(0,0);
});

是否有一种简单的方法可以使其工作并保持代码简单?

非常感谢

1 个答案:

答案 0 :(得分:0)

我可能为时已晚,这可能是一个糟糕的解决方案。然而,我通过使用两个重复的GIF并在'重启'gif时在两者之间交替来解决类似的问题。这在需要时无缝重启gif,技术上它是相同的gif。希望这有帮助,祝你好运!