如何在視圖中一次動畫引導進度條？

Question

我一直在尋找動畫引導程序的進度條，一旦它被滾動查看，現在它加載頁面一旦動畫，一旦我滾動到進度條它完成動畫。

HTML：

<div class="progress"> 
    <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="75">HTML</div> 
</div> 
<div class="progress"> 
    <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="65">CSS</div> 
</div> 
<div class="progress"> 
    <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="20">JavaScript</div> 
</div> 
<div class="progress"> 
    <div class="progress-bar six-sec-ease-in-out" aria-valuetransitiongoal="25">WordPress</div> 
</div> 

CSS：

.progress .progress-bar.six-sec-ease-in-out { 
-webkit-transition: width 6s ease-in-out; 
-moz-transition: width 6s ease-in-out; 
-ms-transition: width 6s ease-in-out; 
-o-transition: width 6s ease-in-out; 
transition: width 6s ease-in-out; 

}

Answer 1

試試這個https://jsfiddle.net/audLoLb0/1/

HTML

<div class="progress-element"> 
    <p>HTML</p> 
    <div class="progress"> 
     <div class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" >     
     </div> 
    </div> 
    <p>CSS</p> 
    <div class="progress"> 
     <div class="progress-bar" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" >     
     </div> 
    </div> 
    <p>JavaScript</p> 
    <div class="progress"> 
     <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" >     
     </div> 
    </div> 
    <p>Wordpress</p> 
    <div class="progress"> 
     <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" >     
     </div> 
    </div> 
</div><!-- End of progress-element --> 

CSS

.progress { 
    height: 1px; 
    background: none; 
    box-shadow: none; 
} 

.progress-bar { 
    background: black; 
} 

.progress-element { 
    text-align: left; 
} 

JS

$(".progress-element").each(function() { 
     var progressBar = $(".progress-bar"); 
     progressBar.each(function(indx){ 
      $(this).css("width", $(this).attr("aria-valuenow") + "%"); 
     }); 
    }); 

重要

如果你想吧，當你進入視觸發和我打賭你，你就必須使用這個http://imakewebthings.com/waypoints/

，只需使用此代碼

JS

/*---------------------------------------------- 
       PROGRESS BARS 
------------------------------------------------*/ 
    $(".progress-element").each(function() { 
     $(this).waypoint(function() { 
     var progressBar = $(".progress-bar"); 
     progressBar.each(function(indx){ 
      $(this).css("width", $(this).attr("aria-valuenow") + "%"); 
     }); 
    }, { 
     triggerOnce: true, 
     offset: 'bottom-in-view' 
    }); 
    }); 

別忘了在此之前加入最新的jquery

Answer 2

你有沒有想過使用$ .onScreen插件。你可以找到它Here。這是獲得jQuery的onScreen事物最簡單和最有效的方法。

$('elements').onScreen({ 
    container: window, 
    direction: 'vertical', 
    doIn: function() { 
    // Do something to the matched elements as they come in 
    }, 
    doOut: function() { 
    // Do something to the matched elements as they get off scren 
    }, 
    tolerance: 0, 
    throttle: 50, 
    toggleClass: 'onScreen', 
    lazyAttr: null, 
    lazyPlaceholder: 'someImage.jpg', 
    debug: false 
});