如何仅在使用

如何仅在使用

关注
发信
关注(28)粉丝(399)

如何仅在使用 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 滚动时为引导程序进度条设置动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

07-29 16:48
Powered by LMLPHP ©2024 如何仅在使用 0.041287