開始滾動的圖表動畫

-1

我正在尋找一種方法來啓動滾動條上的圓環圖動畫，因爲在當前狀態下，圖表動畫在頁面加載時啓動，並且看不到動畫發生如果該部分低於其他部分。 https://github.com/rendro/easy-pie-chart 開始滾動的圖表動畫

代碼：https://codepen.io/Kestvir/pen/GEwMGP

$(document).ready(function() { 

    $('.chart-blue').easyPieChart({ 
    barColor: '#30bae7', 
    scaleColor: false, 
    lineWidth: 10, 
    lineCap: 'circle', 
    size: 150, 
    scaleLength: 0, 
    onStep: function(from, to, percent) { 
     $(this.el).find('span').text(Math.round(percent)); 
    } 
    }); 

    $('.chart-pink').easyPieChart({ 
    barColor: '#d74680', 
    scaleColor: false, 
    lineWidth: 10, 
    lineCap: 'circle', 
    size: 150, 
    scaleLength: 0, 
    onStep: function(from, to, percent) { 
     $(this.el).find('span').text(Math.round(percent)); 
    } 

    }); 

    $('.chart-green').easyPieChart({ 
    barColor: '#17c2a4', 
    scaleColor: false, 
    lineWidth: 10, 
    lineCap: 'circle', 
    size: 150, 
    scaleLength: 0, 
    onStep: function(from, to, percent) { 
     $(this.el).find('span').text(Math.round(percent)); 
    } 

    }); 


    $('.chart-orange').easyPieChart({ 
    barColor: '#eb7d4b', 
    scaleColor: false, 
    lineWidth: 10, 
    lineCap: 'circle', 
    size: 150, 
    scaleLength: 0, 
    onStep: function(from, to, percent) { 
     $(this.el).find('span').text(Math.round(percent)); 
    } 
    }); 

});

來源

2017-07-18 KestVir

檢查出codepen

基本上我寫了一個if語句

$(window).scroll(function() { 
     if ($(this).scrollTop() > 500) {

是被觸發

圖表與製造當你sc滾動特定數量的像素（在本例中爲500），當發生這種情況時，您的圖表將開始加載並獲得您希望的效果。希望這就是它，如果不發表評論:)

來源

2017-07-18 12:38:03 hansTheFranz

感謝您的答案。您提供的解決方案几乎爲我完成了這項工作，但問題是，實際模板中的圖表部分從頂部開始是第四個，另一個是，例如，如果向下滾動到圖表部分，然後重新加載那裏的頁面，頁面將打開，並且圖表部分是您首先看到的內容，如果您不進行一點滾動，則動畫完全不會發生。 – KestVir

也許你應該從頭開始寫嗎？我的意思是我們應該怎麼知道這一點？我寫的解決方案正是你在問題中所要求的。增加scrollValue，使其與您的網站和重新加載問題相匹配：當本網站應該代表您的技能時，您應該面對問題並自行解決。我可以找到肯定的東西，但也許你應該嘗試找到一種方法;-) 如果你真的不能想到一個解決方案，回到這裏，我會寫一個給你:) @KestVir – hansTheFranz

@KestVir所以如何它去了嗎？你達到了你的目標？不要讓答案保持那樣。 – hansTheFranz

開始滾動的圖表動畫

回答

相關問題