本日小作品：
https://codepen.io/linchinhsuan/pen/ZEOYerJ

重點摘要：

var lis = document.querySelectorAll(".data .skill li");
var classNames = ["html","css","jquery","js","rwd","total","day"];
var len = lis.length;
window.addEventListener("scroll",function(){
    var y = window.pageYOffset;
    if(y>100){
        for(var i=0;i<len;i++){
            lis[i].className = classNames[i];
        }     
    }
},false)

在window物件上綁定scroll事件，當頁面捲動的時候，會得到當前頁面的pageYOffset（可以想成離頁面最上方多遠的一個值），並賦值在變數y上。當y>100的時候則觸發for迴圈，將ul裡面的每個li動態新增class上去。

.data .skill li .loading div{
    width: 0%;
    overflow: hidden;
    transition: all 1s .3s ease;
}
.data .skill .html .loading div{
    width: 30%;
}

實際的做法會像是這樣，原本的設定是width為0%，當動態改變class之後，因為權重較高會覆蓋過去，寬度就會從0變成30%。動畫則使用css的transition來完成。
至於overflow: hidden;則是因為文字是寫在div裡面的，當寬度為0的時候文字出現會看起來相當奇怪，所以加上這行之後就可以讓文字被隱藏起來。

－－－

備註：
icon圖片版權來自
Icons made by Freepik from www.flaticon.com

－－－

本日結語：
今天是二十七天，進入了最後四天！今天是想用一個小小的個人檔案形式將從開始到現在寫過的鐵人賽文章統計一下，並練習了以往比較少用的scroll事件，如有寫錯之處麻煩各路高手指教><