滾動動畫技能欄

Question

在我的應用程序中，我有技能欄，當網站加載時，所有東西似乎都能正常工作。當我滾動到技能欄時，我想讓它變成有生命的。我正在使用庫animate.css。

我該如何做這項工作？我錯過了什麼？

skill.js

;(function($) { 
    "use strict"; 

    //skillbars 
    $('.progress-back').each(function() { 
     $(this).find(
      '.progress-full-line-over').css({ 
      'width': $(this).attr(
       'data-percent') 
     }); 
    }); 

})(jQuery); 

我試圖做到這一點，但是這似乎並沒有工作：

skill.js

;(function($) { 
    "use strict"; 

    //skillbars 
    $('.progress-back').each(window.onscroll =function() { 
     $(this).find(
      '.progress-full-line-over').css({ 
      'width': $(this).attr(
       'data-percent') 
     }); 
    }); 

})(jQuery); 

view.html.erb

<div class="progress-wrapper"> 
    <div class="progress-name">html & php</div> 
    <div class="progress-percen">97%</div> 
    <div class="progress-back" data-percent="97%"> 
    <div> 
     <div class="progress-full-line-over animated slideInLeft"></div> 
    </div> 
    </div> 
</div> 

<div class="progress-wrapper"> 
    <div class="progress-name">wordpress</div> 
    <div class="progress-percen">80%</div> 
    <div class="progress-back" data-percent="80%"> 
    <div> 
     <div class="progress-full-line-over animated slideInLeft"></div> 
    </div> 
    </div> 
</div> 

Answer 1

你可以只用純CSS。

<div class="progress"> 
    <div class="progress__box"> 
    <div class="progress__bar"></div> 
    </div> 
</div> 

風格

.progress { 
    border: 1px solid #000; 
    width: 100%; 
} 
.progress__box { 
    width: 70%; /* bar value */ 
} 
.progress__bar { 
    width: 100%; 
    height: 30px; 
    background: green; 
    -webkit-animation-name: progress; /* Safari 4.0 - 8.0 */ 
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */ 
    -webkit-animation-iteration-count: 1; /* Safari 4.0 - 8.0 */ 
    animation-name: progress; 
    animation-duration: 4s; 
    animation-iteration-count: 1;  
} 

/* Safari 4.0 - 8.0 */ 
@-webkit-keyframes progress { 
    0% {width: 0%;} 
    100% {width: 100%;} 
} 

/* Standard syntax */ 
@keyframes progress { 
    0% {width: 0%;} 
    100% {width: 100%;} 
} 

https://jsfiddle.net/sh14/47xethse/
動畫當您滾動到元素開始。