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>

这是我添加到gifs部分的.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);
    });
}
});

当它们进入视图（底部和顶部）时会重新启动它们，并在离开屏幕时淡出它们。它所需要的只是动画GIF具有一个公共类，分配给变量target。如果该网页仅包含gif且没有其他<img>标记，您甚至可以使用$('img')并忽略该课程。看起来相当多的代码，但它有一些去抖和其他优化。

乙 - ）

Answer 2

您需要使用CSS不透明度1或0来显示或隐藏您的元素。这只是来自＆＃34;老派＆＃34;。第二件事是使用相对位置并移出屏幕。此外，您可以将图像从原始大小调整为1x1px到原始大小，但这是一种不好的方式。

刷新页面后，Gif图像不具有动画效果

2 个答案: