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

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 发生的事情。

在您的情况下，只需更改 .started .progress-bar 中的 .progress-bar 即可明智地执行 CSS。

祝你好运!