На хабре нашел очень крутой плагин для построения
анимированной круговой гистограммы.
Все круто работает, но я уткнулся в довольно серьезную проблему, плагин написан написан таким образом чтоб срабатывать сразу после загрузки страницы, а поскольку я планирую разместить этот контент ближе к футеру мне требуется чтобы он срабатывал только при попадании в область просмотра. Еще одна проблема заключается в том что некоторые стили прописаны непосредственно в скрипте и конечный вид гистограммы до начала анимации генерируется в момент начала выполнения скрипта.
Как выглядит сам плагин:
Разметка:
<div id="stats" class="clearfix">
<div class="wrap">
<div class="row">
<div class="circle-container">
<h3>Продажи<br>услуг</h3>
<div class="circlestat" data-dimension="200" data-text="65%" data-width="30" data-fontsize="38" data-percent="65" data-fgcolor="#1253a9" data-bgcolor="#eee" data-fill="#ddd"></div>
</div>
<div class="circle-container">
<h3>Продажи<br>ТНП</h3>
<div class="circlestat" data-dimension="200" data-text="75%" data-width="30" data-fontsize="38" data-percent="75" data-fgcolor="#1253a9" data-bgcolor="#eee" data-fill="#ddd"></div>
</div>
<div class="circle-container">
<h3>Тяжелого<br>оборудования</h3>
<div class="circlestat" data-dimension="200" data-text="35%" data-width="30" data-fontsize="38" data-percent="35" data-fgcolor="#1253a9" data-bgcolor="#eee" data-fill="#ddd"></div>
</div>
</div><!-- @end .row -->
<div class="row">
<div class="circle-container">
<h3>Медицинского<br>оборудования</h3>
<div class="circlestat" data-dimension="200" data-text="3%" data-width="30" data-fontsize="38" data-percent="3" data-fgcolor="#1253a9" data-bgcolor="#eee" data-fill="#ddd"></div>
</div>
<div class="circle-container">
<h3>PHP5</h3>
<div class="circlestat" data-dimension="200" data-text="23%" data-width="30" data-fontsize="38" data-percent="23" data-fgcolor="#1253a9" data-bgcolor="#eee" data-fill="#ddd"></div>
</div>
<div class="circle-container">
<h3>Тяжелое</h3>
<div class="circlestat" data-dimension="200" data-text="9%" data-width="30" data-fontsize="38" data-percent="9" data-fgcolor="#1253a9" data-bgcolor="#eee" data-fill="#ddd"></div>
</div>
</div>
</div><!-- @end .wrap -->
</div><!-- @end #stats -->
Стили прописанные отдельно:
@import url('http://fonts.googleapis.com/css?family=Gabriela');
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { overflow-y: scroll; }
body {
font-family: 'Helvetica', Arial, sans-serif;
font-size: 62.5%;
line-height: 1;
padding: 55px 0;
}
br { display: block; line-height: 1.6em; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
input, textarea {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }
table { border-collapse: collapse; border-spacing: 0; }
h1 {
font-family: 'Gabriela', serif;
font-size: 3.95em;
line-height: 1.8em;
margin-bottom: 15px;
text-align: center;
color: #464646;
}
/** page structure **/
.wrap {
display: block;
margin: 0 auto;
max-width: 800px;
}
#intro {
display: block;
margin-bottom: 25px;
text-align: center;
}
#intro p {
font-size: 1.8em;
line-height: 1.35em;
color: #616161;
font-style: italic;
margin-bottom: 25px;
}
#stats {
display: block;
width: 100%;
padding: 15px 0;
}
#stats .row {
display: block;
}
.circle-container {
display: block;
float: left;
margin-right: 55px;
margin-bottom: 45px;
}
.circle-container h3 {
display: block;
text-align: center;
font-size: 2.25em;
line-height: 1.4em;
color: #363636;
text-shadow: 1px 1px 0 #fff;
}
/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
.circliful {
position: relative;
}
.circle-text, .circle-info, .circle-text-half, .circle-info-half {
width: 100%;
position: absolute;
text-align: center;
display: inline-block;
}
.circle-info, .circle-info-half {
color: #999;
}
.circliful .fa {
margin: -10px 3px 0 3px;
position: relative;
bottom: 4px;
}
Основной скрипт:
(function(a){a.fn.circliful=function(b,d){var c=a.extend({fgcolor:"#556b2f",bgcolor:"#eee",fill:false,width:15,dimension:200,fontsize:15,percent:50,animationstep:1,iconsize:"20px",iconcolor:"#999",border:"default",complete:null},b);return this.each(function(){var w=["fgcolor","bgcolor","fill","width","dimension","fontsize","animationstep","endPercent","icon","iconcolor","iconsize","border"];var f={};var F="";var n=0;var t=a(this);var A=false;var v,G;t.addClass("circliful");e(t);if(t.data("text")!=undefined){v=t.data("text");if(t.data("icon")!=undefined){F=a("<i></i>").addClass("fa "+a(this).data("icon")).css({color:f.iconcolor,"font-size":f.iconsize})}if(t.data("type")!=undefined){j=a(this).data("type");if(j=="half"){s(t,"circle-text-half",(f.dimension/1.45))}else{s(t,"circle-text",f.dimension)}}else{s(t,"circle-text",f.dimension)}}if(a(this).data("total")!=undefined&&a(this).data("part")!=undefined){var I=a(this).data("total")/100;percent=((a(this).data("part")/I)/100).toFixed(3);n=(a(this).data("part")/I).toFixed(3)}else{if(a(this).data("percent")!=undefined){percent=a(this).data("percent")/100;n=a(this).data("percent")}else{percent=c.percent/100}}if(a(this).data("info")!=undefined){G=a(this).data("info");if(a(this).data("type")!=undefined){j=a(this).data("type");if(j=="half"){D(t,0.9)}else{D(t,1.25)}}else{D(t,1.25)}}a(this).width(f.dimension+"px");var i=a("<canvas></canvas>").attr({width:f.dimension,height:f.dimension}).appendTo(a(this)).get(0);var g=i.getContext("2d");var r=i.width/2;var q=i.height/2;var C=f.percent*360;var H=C*(Math.PI/180);var l=i.width/2.5;var B=2.3*Math.PI;var z=0;var E=false;var o=f.animationstep===0?n:0;var p=Math.max(f.animationstep,0);var u=Math.PI*2;var h=Math.PI/2;var j="";var k=true;if(a(this).data("type")!=undefined){j=a(this).data("type");if(j=="half"){B=2*Math.PI;z=3.13;u=Math.PI*1;h=Math.PI/0.996}}function s(J,x,y){a("<span></span>").appendTo(J).addClass(x).text(v).prepend(F).css({"line-height":y+"px","font-size":f.fontsize+"px"})}function D(y,x){a("<span></span>").appendTo(y).addClass("circle-info-half").css("line-height",(f.dimension*x)+"px")}function e(x){a.each(w,function(y,J){if(x.data(J)!=undefined){f[J]=x.data(J)}else{f[J]=a(c).attr(J)}if(J=="fill"&&x.data("fill")!=undefined){A=true}})}function m(x){g.clearRect(0,0,i.width,i.height);g.beginPath();g.arc(r,q,l,z,B,false);g.lineWidth=f.width+1;g.strokeStyle=f.bgcolor;g.stroke();if(A){g.fillStyle=f.fill;g.fill()}g.beginPath();g.arc(r,q,l,-(h),((u)*x)-h,false);if(f.border=="outline"){g.lineWidth=f.width+13}else{if(f.border=="inline"){g.lineWidth=f.width-13}}g.strokeStyle=f.fgcolor;g.stroke();if(o<n){o+=p;requestAnimationFrame(function(){m(Math.min(o,n)/100)},t)}if(o==n&&k&&typeof(b)!="undefined"){if(a.isFunction(b.complete)){b.complete();k=false}}}m(o/100)})}}(jQuery));
Скрипт запускающий всю конструкцию:
$(function(){
$('.circlestat').circliful();
});
Итак что нужно, внести изменения так чтобы плагин срабатывал не при загрузке страницы, а при попадании её в область просмотра (например привязав выполнение скрипта к расстоянию от верхней части экрана).
Простой
