javascript - 刷新页面后 Gif 图像没有动画

Question

我的网站上有一些 gif 图片，当你滚动到页面的那一部分时，我想制作动画。我有一些 JavaScript 代码可以隐藏这些 gif，然后在您到达页面的那部分后显示它们。我遇到的问题是那些 gif 在我滚动到页面的那部分之前就开始动画了。我遇到的另一个问题是，一旦我刷新页面，gif 有时会动画化，但我希望它们在每次刷新页面时都动画化。

这是我网站的链接:http://lam-parker.github.io/my_portfolio_website/

这不是所有的 gif，但这是我的 html 中我的 gif 所在的部分:

  <div class="row4">
        <h1 id="title3">Software Skills</h1>
           <div class="col-md-2 col-sm-4 col-xs-6">
               <img src="img/software-skills/photoshop.gif">
           </div>
           <div class="col-md-2 col-sm-4 col-xs-6">
               <img src="img/software-skills/indesign.gif">
           </div>
     </div>

这是我添加到 gif 部分的 .show()/.hide() JavaScript:

$(window).scroll(function() {
  if ($(window).scrollTop() > 70) {
    $('.row4').show("slow");
  } else {
    $('.row4').hide();
  }
});

如果有人能帮助我，我将不胜感激。提前致谢。

Answer 1

我认为“控制”它们的唯一方法是重新分配 src 属性:

Demo

img {
  opacity: 0;
}

$(window).scroll(function() {

  var current = $(this).scrollTop(),
  path = 'animated.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);
});

---

更新 - 通过请求一些代码，使循环遍历所有动画 gif 成为可能:

Pen

$(function() {

    var target = $('.anigif'),
    path = [], zenith, nadir, current,
    modern = window.requestAnimationFrame;

    target.each(function() {

        path.push(this.src);
    });

    $(window).on('load resize', storeDimensions).on('load scroll', function(e) {

        current = $(this).scrollTop();

        if (e.type == 'load') setTimeout(inMotion, 150);
        else inMotion();

    function inMotion() {

        if (modern) requestAnimationFrame(checkFade);
        else checkFade();
    }
    });

function storeDimensions() {

    clearTimeout(redraw);

    var redraw = setTimeout(function() {

        zenith = []; nadir = [];

        target.each(function() {

            var placement = $(this).offset().top;

            zenith.push(placement-$(window).height());
            nadir.push(placement+$(this).outerHeight());
        });
    }, 150);
}

function checkFade() {

    target.each(function(i) {

        var initiated = $(this).hasClass('active');

        if (current > zenith[i] && current < nadir[i]) {
        if (!initiated) $(this).attr('src', path[i]).addClass('active').fadeTo(500,1);
        }
        else if (initiated) $(this).removeClass('active').fadeTo(0,0);
    });
}
});

它会在它们进入 View (底部 和 顶部)时重新启动它们，并在离开屏幕时淡出它们。它所需要的只是动画 gif 有一个公共(public)类，分配给变量 target .如果该页面仅包含 gif 而没有其他 <img>您甚至可以使用标签 $('img')并离开了类。看起来有很多代码，但它有一些去抖动和其他优化。

B-)