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

I have some gif images on my website that I want to animate once you scroll to that part of the page. I have some JavaScript code that hides those gifs then shows them once you get to that part of the page. The issue I am having is that those gifs start animating before I scroll to that part of the page. Another issue I am having is that once I refresh the page the gifs will sometimes animate, but I would like them to animate each time the page gets refreshed.

我在我的网站上有一些gif图像,一旦你滚动到页面的那一部分我想要动画。我有一些JavaScript代码隐藏那些GIF,然后一旦你到达页面的那一部分就显示它们。我遇到的问题是那些GIF在我滚动到页面的那一部分之前开始制作动画。我遇到的另一个问题是,一旦刷新页面,gif有时会生成动画,但我希望每次页面刷新时都能进行动画处理。

Here is the link to my website: http://lam-parker.github.io/my_portfolio_website/

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

This isn't all of the gifs but here's is the portion of my html where my gifs are:

这不是所有的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>

Here is the .show()/.hide() JavaScript I added to the gifs section:

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

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

I would appreciate it if someone could help me. Thanks in advance.

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

2 个解决方案

#1

I think the only way to 'control' them would be to reassign the src attribute :

我认为“控制”它们的唯一方法是重新分配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);
});

Update - by request some code that makes it possible to loop through all animated gifs :

更新 - 通过请求一些代码,使循环所有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);
    });
}
});

It will reinitiate them when they come into view (bottom and top) and fade them out when leaving the screen. All it needs is for the animated gifs to have a common class, assigned to the variable target. If the page contains only gifs and no other <img> tags you could even use $('img') and leave out the class. Looks like quite a bit of code but it has some debouncing and other optimisation.

当它们进入视野(底部和顶部)时会重新启动它们,并在离开屏幕时淡出它们。它所需要的只是动画GIF具有一个公共类,分配给变量目标。如果页面只包含gif而没有其他刷新页面后，Gif图像不具有动画效果标签,你甚至可以使用$('img')并省略该课程。看起来相当多的代码,但它有一些debouncing和其他优化。

B-)

#2

-1

You need to use CSS opacity 1 or 0 to show or hide your element. That is only way from "old-school". Second thing is to use relative position and move out of screen. Also you can resize image from original size to 1x1px to original size but that is a bad way.

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

#1