yesterday found nice effect on website wich decided implement on projects, simple javascript progressive counter, this
obviously starts 0 x without looping , looks more smoother in live web, anyway, not find third party snipet, how can achieve this!?
progressive-counter.js
progressivecounter=function(params) { /* autor: eccentric money maker <3 usage: give progressive transition effect counter starts x y params: id ~ string ~ identify internally counter container ~ object ~ result displayed ~ int ~ number start dest ~ int ~ optional, number end destfromproperty ~ string ~ optional, data defined "data-" on "container" specify number end format ~ function ~ callback used format output finished ~ function ~ callback used @ end of iteration note: code made snipet of code found on site, original coders idea, need share :* */ // ... if(typeof(progressivecounter_data)=="undefined") progressivecounter_data={}; // ... if( (typeof(params.id)!="string" || typeof(params.id)=="") || typeof(params.container)!="object" || (typeof(params.dest)=="undefined" && typeof(params.destfromproperty)=="undefined") ) return; // ... params.from=parseint(params.from,10); if(typeof(params.from)!="number") return; if(params.destfromproperty) params.dest=$(params.container).data(params.destfromproperty); params.dest=parseint(params.dest,10); if(typeof(params.dest)!="number") return; if(params.from>params.dest) return; if(typeof(params.format)!="function") params.format=null; if(typeof(params.finished)!="function") params.finished=null; // ... progressivecounter_data[params.id]={ container:params.container, from:params.from, dest:params.dest, shrscountertimestep:10, format:params.format, finished:params.finished }; // ... progressivecounter_iterate(params.id); } progressivecounter_iterate=function(id) { // ... if(typeof(progressivecounter_data)=="undefined" || typeof(progressivecounter_data[id])!="object") return; // ... var data=progressivecounter_data[id]; // ... var delta=data.dest-data.from, threshold=15, lastthreshold=4, timestepincrement=15, numberformatted="" ; // ... if(delta<threshold) data.shrscountertimestep+=timestepincrement; delta=math.ceil(delta*0.05); if(data.from>=data.dest-lastthreshold){ delta=1; data.shrscountertimestep=350; } data.from+=delta; // ... if(data.format) numberformatted=data.format(data.from); else numberformatted=data.from; // ... if(data.from>=data.dest){ data.from=data.dest; $(data.container).text(numberformatted); if(data.finished) data.finished(); } else { $(data.container).text(numberformatted); settimeout(function() { progressivecounter_iterate(id); },data.shrscountertimestep); } };
basic usage
progressivecounter({ id:"stats_visits", container:$("#element").get(0), from:0, dest:43800 });
Comments
Post a Comment