- 首页
- 前端开发
- 如何仅在使用 javascript/jquery 滚动时为引导程序进度条设置动画?
如何仅在使用 javascript/jquery 滚动时为引导程序进度条设置动画?
[英] How to animate bootstrap progress bar only on scroll with javascript / jquery?
本文介绍了如何仅在使用 javascript/jquery 滚动时为引导程序进度条设置动画?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在滚动时为引导程序进度条设置动画(每次滚动动画时都应重新启动).我已经在 stackoverflow 上查找了解决方案，但是当我应用它们时，没有任何效果，因此进度条仍然移动"而不是在滚动时而是在页面加载时.我想只使用 js/jquery 和关键帧而不使用任何库.如果有人有提示，那就太好了.谢谢！
https://jsfiddle.net/hdxv4hrp/
代码:html:
<div style="width: 400px; margin: 50px auto"><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 style="width: 400px; margin: 50px auto"><div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 10%"><span class="title">20%</span>
<div style="width: 400px; margin: 50px auto"><div class="progress"><div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 90%"><span class="title">90%</span>
CSS:
.progress-bar {宽度:0；动画:前进 1.5 秒缓入缓出；.标题 {不透明度:0；动画:显示 0.35 秒向前缓入缓出 0.5 秒；}}@关键帧进度{从 {宽度:0；}至 {宽度:100%；}}@keyframes 显示 {从 {不透明度:0；}
js:
$(window).scroll(function() {如果 ($(window).scrollTop() > 0) {progress-bar.addClass("show");} 别的 {progress-bar.removeClass("show");}});
解决方案
看下面我想这就是你想要的 我已经添加了一些 css 属性来保持进度条在顶部固定位置，以便您可以跟踪进度并验证它是否正常工作
$(document).ready(function() {$(document).scroll(function(event) {var topPos = $(this).scrollTop() + 100;var windowHeight = $(this).height();var docHeight = $(document).height();if (topPos >= $('#progress-1').position().top) {$('#progress-1 >.progress-bar').css({'最大宽度':'100%'}).attr('aria-valuenow', 100).find('span.title').text('100%');} else if (topPos < $('#progress-1').position().top) {$('#progress-1 >.progress-bar').css({最大宽度":0%"}).attr('aria-valuenow', 0).find('span.title').text('0%');}if (topPos >= $('#progress-2').position().top) {$('#progress-2 > .progress-bar').css({'最大宽度':'100%'}).attr('aria-valuenow', 100).find('span.title').text('100%');} 别的 {$('#progress-2 > .progress-bar').css({最大宽度":0%"}).attr('aria-valuenow', 0).find('span.title').text('0%');}if (topPos >= $('#progress-3').position().top) {$('#progress-3 > .progress-bar').css({'最大宽度':'100%'}).attr('aria-valuenow', 100).find('span.title').text('100%');} 别的 {$('#progress-3 > .progress-bar').css({最大宽度":0%"}).attr('aria-valuenow', 0).find('span.title').text('0%');}});})
.title {颜色:#000；}.图像 {背景图片:网址(http://unsplash.imgix.net/44/lSed5VXIQnOw7PMfB9ht_IMG_1642.jpg?fit=crop&fm=jpg&h=660&q=75&w=1050)；高度:400px；}.进度条 {宽度:0；动画:前进 1.5 秒缓入缓出；.标题 {不透明度:0；动画:显示 0.35 秒向前缓入缓出 0.5 秒；}}@关键帧进度{从 {宽度:0；}至 {宽度:100%；}}@keyframes 显示 {从 {不透明度:0；}至 {不透明度:1；}}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/><script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script><div class="spacer"></div><br/><br/><br/><br/><br/><br/><br/><br/>br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><div style="width: 400px; margin: 50px auto"><div class="progress" id="progress-1"><div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 0%"><span class="title">0%</span>
<br/><br/><br/><br/><br/><br/><br/><br/>br/><br/><br/><br/><br/><div style="width: 400px; margin: 50px auto"><div class="progress" id="progress-2"><div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 0%"><span class="title">0%</span>
<br/><br/><br/><br/><br/><br/><div style="width: 400px; margin: 50px auto"><div class="progress" id="progress-3"><div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 0%"><span class="title">0%</span>
<br/><br/><br/><br/><br/><br/><br/><br/>br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
I want to animate the bootstrap progress bar on scroll (also every time you scroll the animation should restart). Ive looked up solutions on stackoverflow, but when I apply them, nothing works, so the progress bar still 'moves' not on scroll but on page load. I would like to just do it with js/jquery and keyframes and without any library. If anyone has a tip, that would be great. Thanks!
https://jsfiddle.net/hdxv4hrp/
code:
html:
<div class="spacer"></div>
<div style="width: 400px; margin: 50px auto">
<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>
<div style="width: 400px; margin: 50px auto">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 10%">
<span class="title">20%</span>
</div>
</div>
</div>
<div style="width: 400px; margin: 50px auto">
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 90%">
<span class="title">90%</span>
</div>
</div>
</div>
css:
.progress-bar {
width: 0;
animation: progress 1.5s ease-in-out forwards;
.title {
opacity: 0;
animation: show 0.35s forwards ease-in-out 0.5s;
}
}
@keyframes progress {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes show {
from {
opacity: 0;
}
js:
$(window).scroll(function() {
if ($(window).scrollTop() > 0) {
progress-bar.addClass("show");
} else {
progress-bar.removeClass("show");
}
});
解决方案
See below i think this is what you want i have added some css properties to keep the progress bar on top fixed position so that you can track the progress and verify if it works correctly
$(document).ready(function() {
$(document).scroll(function(event) {
var topPos = $(this).scrollTop() + 100;
var windowHeight = $(this).height();
var docHeight = $(document).height();
if (topPos >= $('#progress-1').position().top) {
$('#progress-1 >.progress-bar').css({
'max-width': '100%'
})
.attr('aria-valuenow', 100)
.find('span.title').text('100%');
} else if (topPos < $('#progress-1').position().top) {
$('#progress-1 >.progress-bar').css({
'max-width': '0%'
})
.attr('aria-valuenow', 0)
.find('span.title').text('0%');
}
if (topPos >= $('#progress-2').position().top) {
$('#progress-2 > .progress-bar').css({
'max-width': '100%'
})
.attr('aria-valuenow', 100)
.find('span.title').text('100%');
} else {
$('#progress-2 > .progress-bar').css({
'max-width': '0%'
})
.attr('aria-valuenow', 0)
.find('span.title').text('0%');
}
if (topPos >= $('#progress-3').position().top) {
$('#progress-3 > .progress-bar').css({
'max-width': '100%'
})
.attr('aria-valuenow', 100)
.find('span.title').text('100%');
} else {
$('#progress-3 > .progress-bar').css({
'max-width': '0%'
})
.attr('aria-valuenow', 0)
.find('span.title').text('0%');
}
});
})
.title {
color: #000;
}
.image {
background-image: url(http://unsplash.imgix.net/44/lSed5VXIQnOw7PMfB9ht_IMG_1642.jpg?fit=crop&fm=jpg&h=660&q=75&w=1050);
height: 400px;
}
.progress-bar {
width: 0;
animation: progress 1.5s ease-in-out forwards;
.title {
opacity: 0;
animation: show 0.35s forwards ease-in-out 0.5s;
}
}
@keyframes progress {
from {
width: 0;
}
to {
width: 100%;
}
}
@keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="spacer"></div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div style="width: 400px; margin: 50px auto">
<div class="progress" id="progress-1">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 0%">
<span class="title">0%</span>
</div>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div style="width: 400px; margin: 50px auto">
<div class="progress" id="progress-2">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 0%">
<span class="title">0%</span>
</div>
</div>
</div>
<br /><br /><br /><br /><br /><br />
<div style="width: 400px; margin: 50px auto">
<div class="progress" id="progress-3">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="max-width: 0%">
<span class="title">0%</span>
</div>
</div>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/><br /><br /><br /><br /><br />
这篇关于如何仅在使用 javascript/jquery 滚动时为引导程序进度条设置动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
