jQuery circle progress bar и процентная анимация текста при видимом видимом экране

Question

Я новичок в jQuery, и я использую плагин jquery-circle-progress от kottenator. У меня четыре круга, и я хочу анимировать его панель и процентный текст, когда область видима на экране. Как и большинство веб-сайтов, эффект.

Может кто-нибудь, пожалуйста, помогите мне сделать этот эффект с небольшим объяснением? Спасибо заранее, дорогой. My fiddle

HTML:

<section class="firstDiv"></section> 
<section class="secondDiv"></section> 
<div class="thirdDiv"> 
    <div id="circle1"> 
    <span class="rate">85%</span> 
    </div> 
    <div id="circle2"> 
    <span class="rate">90%</span> 
    </div> 
    <div id="circle3"> 
    <span class="rate">80%</span> 
    </div> 
    <div id="circle4"> 
    <span class="rate">70%</span> 
    </div> 
</div> 

CSS:

section{ height: 700px; overflow: hidden;} 
.firstDiv{ background: blue;} 
.secondDiv{ background: yellow;} 
.thirdDiv div{ 
     float: left; 
     width: 25%; 
     overflow: hidden; 
     margin: 50px 0; 
     position: relative; 
     } 
.rate{ 
    position: absolute; 
    top: 40%; 
    left: 25%; 
} 

JS:

$('#circle1').circleProgress({ 
    value: 0.85, 
    size: 100, 
    fill: { 
     gradient: [ "#FD0000" , "#FD7300", "#FDBD00"] 
    } 
    }); 


    $('#circle2').circleProgress({ 
    value: 0.90, 
    size: 100, 
    fill: { 
     gradient: ["#00B050", "#00CA00", "#9EEC00"] 
    } 
    }); 


    $('#circle3').circleProgress({ 
    value: 0.80, 
    size: 100, 
    fill: { 
     gradient: ["#FDFD00", "#FDE700", "#CDF500"] 
    } 
    }); 


    $('#circle4').circleProgress({ 
    value: 0.70, 
    size: 100, 
    fill: { 
     gradient: ["#123FAA", "#3914AE", "#0B63A3"] 
    } 
    }); 

My fiddle

Answer 1

Хорошо, это был очень хороший опыт. Я решил проблему, используя плагин jquery.appear. Я вставляю полный код в этой части кода:

var el = $('.circle'), 
     inited = false; 

    el.appear({ force_process: true }); 

    el.on('appear', function() { 
     if (!inited) { 
     el.circleProgress({ value: 0.7 }); 
     inited = true; 
     } 
    }); 

Это хороший плагин, который выполнить код, когда DIV (в моем случае .thirdDiv) на экране. Мой полный код JS ниже:

var el = $('.thirdDiv'), 
     inited = false; 

    el.appear({ force_process: true }); 

    el.on('appear', function() { 
     if (!inited) { 
     $("#circle1").circleProgress({ 
     value: 0.7, 
     size: 100, 
     fill: { 
      gradient: [ "#FD0000" , "#FD7300", "#FDBD00"] 
      } 
     }); 

     $("#circle2").circleProgress({ 
     value: 0.90, 
     size: 100, 
     fill: { 
      gradient: ["#00B050", "#00CA00", "#9EEC00"] 
     } 
     }); 


     $("#circle3").circleProgress({ 
     value: 0.80, 
     size: 100, 
     fill: { 
      gradient: ["#FDFD00", "#FDE700", "#CDF500"] 
     } 
     }); 

     $("#circle4").circleProgress({ 
     value: 0.70, 
     size: 100, 
     fill: { 
      gradient: ["#123FAA", "#3914AE", "#0B63A3"] 
     } 
     }); 

     inited = true; 
     } 

}); 

Спасибо всем :)