[英]How to make my animated skills bar responsive
I have an animated skills bar on my website, which fires when the section scrolls into view. 我的网站上有一个动画技能栏,该栏滚动到视图时会触发。 Everything is working well so far. 到目前为止,一切正常。 Except when the viewport changes/window resizes the animated bars won't adjust to it and will be too long or to short. 除非视口更改/窗口调整大小,否则动画条不会适应它,并且会太长或太短。
I tried to solve this problem with $(window).resize(function(){location.reload();
but on mobile viewport it keeps refreshing the page even though I'm just scrolling. 我试图用$(window).resize(function(){location.reload();
解决此问题,但是在移动视口中,即使我只是在滚动,它仍会刷新页面。
I already searched the net to see if there is a way to just reload the specific jquery function, but couldn't find anything. 我已经在网上搜索了是否有一种方法可以重新加载特定的jquery函数,但是找不到任何东西。 Or to be honest I didn't quite understood I guess, and couldn't get it working. 或说实话,我不太了解,也无法正常工作。 Here is what I found: https://css-tricks.com/forums/topic/reload-jquery-functions-on-ipad-orientation-change/ 这是我发现的东西: https : //css-tricks.com/forums/topic/reload-jquery-functions-on-ipad-orientation-change/
I read there is a way to make the website reload the whole js file. 我读到有一种方法可以使网站重新加载整个js文件。 But since I still have other animations on my page, I don't know if this is the best way to do it. 但是由于页面上还有其他动画,所以我不知道这是否是最好的方法。
I'm glad if anyone could help me with this. 如果有人可以帮助我,我感到很高兴。 I'm very new to coding and my js/jquery knowledge is still very limited/non-existent. 我对编码非常陌生,但我的js / jquery知识仍然非常有限/不存在。
here is my script for the bar animation 这是我的酒吧动画脚本
var $meters = $(".meter > span");
var $section = $('#skills .meter');
var $queue = $({});
function loadDaBars() {
$meters.each(function() {
var $el = $(this);
var origWidth = $el.width();
$el.width(0);
$queue.queue(function(next) {
$el.animate({width: origWidth}, 800, next);
});
});
}
$(document).bind('scroll', function(ev) {
var scrollOffset = $(document).scrollTop();
var containerOffset = $section.offset().top - window.innerHeight;
if (scrollOffset > containerOffset) {
loadDaBars();
$(document).unbind('scroll');
}
});
the width for the skillbar is defined via div class and span in %. 技能栏的宽度是通过div类定义的,跨度以%为单位。 Maybe there is a css solution to this? 也许对此有一个CSS解决方案?
edit: this is how my html and css code looks like 编辑:这就是我的html和CSS代码的样子
.meter { background-color: hsla(54, 73%, 95%, 1); vertical-align: bottom; width: 100%; position: relative; } .meter>span { display: block; background-color: rgb(241, 233, 166); position: relative; overflow: hidden; }
<div class="col-lg-6 col-md-6 col-sm-6"> <div class="meter"> <span style="width: 50%"></span> </div>
You remove the style property of the bar once the animation has finished. 动画完成后,您将删除栏的style属性。 This way the css rule will apply again: 这样,css规则将再次适用:
$el.animate({width: origWidth}, {duration: 800, complete: function (){$el.removeAttr('style')}}, next);
(Assuming the width defined by the css is responsive) (假设CSS定义的宽度是响应性的)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.