我的网站上有一些 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();
}
});
如果有人能帮助我,我将不胜感激。提前致谢。
最佳答案
我认为“控制”它们的唯一方法是重新分配 src 属性:
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 成为可能:
$(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-)
关于javascript - 刷新页面后 Gif 图像没有动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32771645/