我想在滚动时激活我的进度条,然后使用waypoints.js
。然而,它不起作用,进度条要么被填满,要么被填满。在我滚动之前或(like in my current code)仍然是空的'滚动以及页面加载。
HTML:
<div id="progress-bar-start" class="center-block progress-wrapper">
<h4>UI/UX Design:</h4>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 60%">
<span class="title">60%</span>
</div>
</div>
</div>
的CSS:
#skills {
margin-top: 0px;
margin-bottom: 50px;
.skills-title::first-letter {
font-size: 60px;
color: pink;
}
.progress-wrapper {
width: 50%;
margin-top: 30px;
.progress-bar {
background-color: pink;
width: 0;
animation: progress 1.5s ease-in-out forwards;
.title {
opacity: 0;
animation: show 0.35s forwards ease-in-out 0.5s;
}
}
.progress {
height: 40px;
}
}
@keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
JS:
$('#skills').waypoint(function(direction) {
if (direction === 'down') {
$('.progress-bar').addClass("show");
} else {
$('.progress-bar').removeClass("show");
}
}, {
offset: '50%'
});
答案 0 :(得分:1)
这里有几点需要注意。
offset
选项开始:默认情况下,当元素的顶部到达窗口顶部时,会触发一个航点。 offset
指定这些顶部位置之间的触发距离。
在您的示例中,请务必注意,#skills
部分会粘贴到窗口的顶部,这意味着offset >= 0
部分会在页面加载时立即触发,并且只会触发一次(使用“向下”方向) )。width
,而不是可见性/显示。此外,设置宽度应该通过width
而不是max-width
属性来完成,因为运行css动画需要这样做。所以,解决方案如下:
<强> HTML 强>
<div class="progress">
<!-- CHANGE style="max-width: 60%" TO data-score="60%" -->
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" data-score="60%"></div>
</div>
<强> JS 强>
$('#skills').waypoint(function(direction) {
if (direction === 'down') {
$('.progress-bar').width(function(){
// this here refers to individual .progress-bar items
return $(this).data('score');
});
} else {
$('.progress-bar').width(0);
}
}, { offset: '10%' });
<强> SCSS 强>
#skills {
margin-top: 100px;
/* …the rest is the same… */
}
Fiddle上也提供了工作示例。
更新(回答评论):
如果您希望每次用户向下滚动时都发生动画,但在此期间不显示进度条的减少动画,您可以按如下方式更改代码:
$('#skills').waypoint(function(direction) {
if (direction === 'down') {
$('.progress-bar').width(function(){
// this here refers to individual .progress-bar items
return $(this).data('score');
});
}
}, { offset: '10%' });
$('#skills').waypoint(function(direction) {
if (direction === 'up') {
$('.progress-bar').width(0);
}
}, { offset: '100vh' });
上面的代码仍会运行减少动画,但是当没有在iframe中运行时(如在小提琴中),当#skills
超出视口时,它会被触发。 (在这种情况下,您也可以使用可见性类。)
为了更好地展示功能,我还在此Fiddle version的margin-top: 100vh;
上设置了#skills
。