[英]How to activate progress bar on scroll using waypoints?
我想激活滚动条上的进度条,并为此使用waypoints.js
。 但是,它不起作用,并且在滚动之前进度条已“填满”,或者( 在当前代码中 )在滚动以及页面加载时仍为“空”。
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%'
});
这里有几件事要注意。
offset
选项开始:默认情况下,当元素的顶部到达窗口顶部时,将触发一个Waypoint。 offset
指定了这些顶部位置之间的触发距离。 在您的示例中,需要特别注意的是, #skills
部分#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' });
上面的代码仍然运行减少动画,但是当不在#skills
不在视口中触发的iframe中运行时(如在Fiddle中),该代码将不可见。 (在这种情况下,您也可以使用可见性类。)为了更好地展示功能,我还设置了margin-top: 100vh;
在此Fiddle版本中的 #skills
上。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.