在我的应用程序中,我有技能栏,当网站加载并且一切正常时,这些技能栏会显示动画。当我滚动到技能栏时,我想让它动画。我正在使用库 animate.css。
我怎样才能使这个工作?我错过了什么?
skill.js
;(function($) {
"use strict";
//skillbars
$('.progress-back').each(function() {
$(this).find(
'.progress-full-line-over').css({
'width': $(this).attr(
'data-percent')
});
});
})(jQuery);
我试过这样做,但这似乎不起作用:
skill.js
;(function($) {
"use strict";
//skillbars
$('.progress-back').each(window.onscroll =function() {
$(this).find(
'.progress-full-line-over').css({
'width': $(this).attr(
'data-percent')
});
});
})(jQuery);
view.html.erb
<div class="progress-wrapper">
<div class="progress-name">html & php</div>
<div class="progress-percen">97%</div>
<div class="progress-back" data-percent="97%">
<div>
<div class="progress-full-line-over animated slideInLeft"></div>
</div>
</div>
</div>
<div class="progress-wrapper">
<div class="progress-name">wordpress</div>
<div class="progress-percen">80%</div>
<div class="progress-back" data-percent="80%">
<div>
<div class="progress-full-line-over animated slideInLeft"></div>
</div>
</div>
</div>
最佳答案
你可以只用纯 CSS 来实现。
<div class="progress">
<div class="progress__box">
<div class="progress__bar"></div>
</div>
</div>
风格
.progress {
border: 1px solid #000;
width: 100%;
}
.progress__box {
width: 70%; /* bar value */
}
.progress__bar {
width: 100%;
height: 30px;
background: green;
-webkit-animation-name: progress; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
-webkit-animation-iteration-count: 1; /* Safari 4.0 - 8.0 */
animation-name: progress;
animation-duration: 4s;
animation-iteration-count: 1;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes progress {
0% {width: 0%;}
100% {width: 100%;}
}
/* Standard syntax */
@keyframes progress {
0% {width: 0%;}
100% {width: 100%;}
}
https://jsfiddle.net/sh14/47xethse/
当您滚动到元素时动画开始。
关于javascript - 滚动上的动画技能栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45570684/