Question

我仅在屏幕上可见时才需要加载进度条。我使用以下代码

          <div class="col-md-6 right">
               <div class="skill">
                 <div class="progressWrap">
                     <span class="title" style="">3D Visualizer</span>  <span class="title" style="float: right;">95%</span>
                   <div class="progress">
                     <div class="progress-bar" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="max-width: 95%">
                     </div>
                   </div>
                 </div>
                 <div class="progressWrap">
                     <span class="title" style="">Graphic Designer</span>  <span class="title" style="float: right;">85%</span>
                   <div class="progress">
                     <div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="max-width: 85%">
                      </div>
                   </div>
                 </div>
                   <div class="progressWrap">
                     <span class="title" style="">Marketing</span>  <span class="title" style="float: right;">90%</span>
                   <div class="progress">
                     <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="max-width: 90%">
                      </div>
                   </div>
                 </div>
               </div>
             </div>

CSS

/*PROGRESS BAR*/
.progress{
    height: 5px;
    margin-top: 10px;
}
.progress-bar {
    width: 0;
    background:#000000;
    -webkit-animation: progress 2.5s ease-in-out forwards;
          animation: progress 2.5s ease-in-out forwards;
}
.progress-bar .title {
  opacity: 0;
  -webkit-animation: show 0.35s forwards ease-in-out 0.5s;
          animation: show 0.35s forwards ease-in-out 0.5s;
}

@-webkit-keyframes progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
@-webkit-keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.skill{
    width: 80%;
    padding: 10px;
    padding-top: 50px;
}
.skill span{
    color: #939393;
    font-family: 'arial';

}
.skill .progressWrap{
    padding:5px;
}

通过使用此代码，可以在页面加载时加载进度条。因此，当我滚动到本节时，所有进度条都已加载。但我需要的是它应该在屏幕上可见时加载。谁能帮我

Answer 1

使用javascript可以达到这种效果，在您的情况下，我建议您查看Delighters.js，我自己已经在一些项目中使用过。该脚本无所事事，然后在视图中向元素添加类。

嵌入脚本并将属性data-delighter放在要使用的html元素上时，将添加类started。这样，您就可以控制CSS发生了什么。

在您的情况下，只需更改.progress-bar中的.started .progress-bar就可以了。

祝你好运！

在屏幕上可见时加载技能栏

1 个答案: