问题描述
我的网站上有一些gif图像,一旦滚动到页面的该部分,我就希望对其进行动画处理.我有一些JavaScript代码,可以隐藏这些gif,然后在到达页面的该部分后立即将其显示.我遇到的问题是,在我滚动到页面的该部分之前,这些gif文件会开始设置动画.我遇到的另一个问题是,刷新页面后,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.
这是我网站的链接: http://lam-parker.github.io/my_portfolio_website/
这不是所有的gif,但这是我的gif所在的html部分:
This isn't all of the gifs but here's is the portion of my html where my gifs are:
<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:
Here is the .show()/.hide() JavaScript I added to the gifs section:
$(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.
推荐答案
我认为控制"它们的唯一方法是重新分配src属性:
I think the only way to 'control' them would be to reassign the src attribute :
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);
});
更新-通过请求一些代码来循环遍历所有动画gifs:
Update - by request some code that makes it possible to loop through all animated gifs :
$(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')
并忽略该类.看起来像很多代码,但是它具有一些反跳和其他优化功能.
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.
B-)
这篇关于刷新页面后GIF图片没有动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!