countup
Version:
Animates a numerical value by counting to it
393 lines (353 loc) • 17.8 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="robots" content="index,follow">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="A javascript class that animates a numerical value by counting to it.">
<title>CountUp.js</title>
<!-- <link rel="stylesheet" type="text/css" href="../inorganik.github.io/assets/css/style.css?v=20140820"> -->
<link rel="stylesheet" type="text/css" href="../assets/css/style.css?v=20141210">
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> -->
<script src="countUp.js"></script>
<!-- <script type="text/javascript" src="angular-countUp.js"></script> -->
<script>
//var app = angular.module("demoApp",["countUpModule"]);
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-7742845-9', 'inorganik.github.io');
ga('send', 'pageview');
</script>
</head>
<body ng-app="demoApp">
<a class="forkMe" href="https://github.com/inorganik/CountUp.js"><img src="../assets/img/forkme_custom_indigo.png" alt="Fork me on GitHub"></a>
<div id="wrap">
<header>
<div id="github"><a class="block" href="https://github.com/inorganik"></a></div>
<div class="leaderLine">////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</div>
<div id="logo"><a class="block" href="http://inorganik.github.io"></a></div>
</header>
<section>
<h1>CountUp.js <small id="version" class="lt-gray"></small></h1>
<p>CountUp.js is a dependency-free, lightweight JavaScript "class" that can be used to quickly create animations that display numerical data in a more interesting way.</p>
<p>Install via npm using the package name <code class="indigo large"> countup.js </code> or bower using <code class="indigo large"> countUp.js</code>.</p>
<h3 class="marginTop marginBottom"><a class="lime weight700" href="https://github.com/inorganik/CountUp.js">Download on Github</a></h3>
</section>
<section>
<p style="position:absolute; top:5px; left:0;">Current stars:</p>
<h1 class="jumbo" id="myTargetElement">0</h1>
</section>
<section>
<form>
<h4 class="inlineLeft noMargin weight300">Params:</h4>
<div class="inlineLeft marginLeft marginRight">
<input type="text" value="24.02" id="startVal" style="width:50px" onkeyup="updateCodeVisualizer()">
<label class="inlineLabel">Start</label>
</div>
<input type="button" class="inlineLeft marginRight" value="Swap" onClick="swapValues()" style="width:80px;">
<div class="inlineLeft marginRight">
<input type="text" value="94.62" id="endVal" style="width:50px" onkeyup="updateCodeVisualizer()">
<label class="inlineLabel">End</label>
</div>
<div class="inlineLeft marginRight">
<input type="number" value="2" id="decimals" step="1" style="width:50px" onkeyup="updateCodeVisualizer()" onchange="updateCodeVisualizer()">
<label class="inlineLabel">Decimals</label>
</div>
<div class="inlineLeft marginRight">
<input type="number" value="2.5" id="duration" step=".1" style="width:50px" onkeyup="updateCodeVisualizer()" onchange="updateCodeVisualizer()">
<label class="inlineLabel">Duration</label>
</div>
</form>
</section>
<section>
<form>
<h4 class="inlineLeft noMargin weight300">Options:</h4>
<div class="inlineLeft marginLeft marginRight">
<input type="checkbox" onClick="toggleEasing(this)" checked><label class="inlineLabel">Use easing</label>
</div>
<div class="inlineLeft marginRight">
<input type="checkbox" onClick="toggleGrouping(this)" checked><label class="inlineLabel">Use grouping</label>
</div>
<div class="inlineLeft marginRight">
<input type="text" value="," id="separator" style="width:15px; padding:0 5px;" onkeyup="updateCodeVisualizer()">
<label class="inlineLabel">Separator</label>
</div>
<div class="inlineLeft marginRight">
<input type="text" value="." id="decimal" style="width:15px; padding:0 5px;" onkeyup="updateCodeVisualizer()">
<label class="inlineLabel">Decimal</label>
</div>
<div class="inlineLeft marginRight">
<input type="text" value="" id="prefix" style="width:15px; padding:0 5px;" onkeyup="updateCodeVisualizer()">
<label class="inlineLabel">Prefix</label>
</div>
<div class="inlineLeft marginRight">
<input type="text" value="" id="suffix" style="width:15px; padding:0 5px;" onkeyup="updateCodeVisualizer()">
<label class="inlineLabel">Suffix</label>
</div>
</form>
</section>
<section>
<form>
<h4 class="inlineLeft noMargin weight300">Methods:</h4>
<input type="button" value="Start" onClick="createCountUp()" class="inlineLeft marginLeft marginRight">
<input type="button" value="Pause/Resume" onClick="showCodeAndPauseResume()" class="inlineLeft marginRight">
<input type="button" value="Reset" onClick="showCodeAndReset()" class="inlineLeft marginRight">
<input type="button" value="Update:" onClick="showCodeAndUpdate()" class="inlineLeft" style="margin-right:2px">
<div class="inlineLeft marginRight">
<input type="text" value="6789" id="updateVal" style="width:50px" onkeyup="updateCodeVisualizerForUpdate()">
</div>
<input type="checkbox" onClick="toggleOnComplete(this)"><label class="inlineLabel">Alert on complete</label>
</form>
</section>
<section id="easingSection">
<form>
<h4 class="inlineLeft noMargin weight300">Custom easing:</h4>
<div class="inlineLeft marginLeft">
<select id="easingFnsDropdown" class="marginRight">
<option value="easeOutExpo" selected>easeOutExpo (default, built-in)</option>
<option value="outQuintic">outQuintic</option>
<option value="outCubic">outCubic</option>
</select>
<input type="button" value="Apply easing" onClick="createCountUp()">
</div>
</form>
</section>
<section class="marginBottom">
<div class="col full marginBottom marginTop">
<div class="code-contain marginBottom">
<code id="codeVisualizer" class="indigo">var options = {<br>
  useEasing : true, <br>
  easingFn : null, <br>
  useGrouping : true, <br>
  separator : ',', <br>
  decimal : '.' <br>
}<br>
var demo = new CountUp("myTargetElement", 24.02, 94.62, 0, 2, options);<br>
demo.start();
</code>
</div>
</div>
</section>
</div>
</body>
<script type="text/javascript">
// set CountUp options
// you don't need to do this - you can use the default options
var useOnComplete = false,
useEasing = true,
easingFn = null,
useGrouping = true,
options = {
useEasing : useEasing, // toggle easing
easingFn : easingFn, // defaults to easeOutExpo, but you can specify your own
useGrouping : useGrouping, // 1,000,000 vs 1000000
separator : ',', // character to use as a separator
decimal : '.', // character to use as a decimal
};
var demo, code, data, stars, easingFunctions;
// create instance
window.onload = function() {
// setup CountUp object
demo = new CountUp('myTargetElement', 0, 94.62, 2, 2.5, options);
// you could do demo.start() right here but we are getting actual current star count from github api below
// since it is an asynchronous call, we fire start() in the success fn of the XMLHttpRequest object
getStars.send();
// display version (no hassling with markup!)
document.getElementById('version').innerHTML = 'v'+demo.version();
};
easingFunctions = {
easeOutExpo: function(t, b, c, d) {
return c * (-Math.pow(2, -10 * t / d) + 1) * 1024 / 1023 + b;
},
outQuintic: function(t, b, c, d) {
var ts = (t /= d) * t;
var tc = ts * t;
return b + c * (tc * ts + -5 * ts * ts + 10 * tc + -10 * ts + 5 * t);
},
outCubic: function(t, b, c, d) {
var ts = (t /= d) * t;
var tc = ts * t;
return b + c * (tc + -3 * ts + 3 * t);
}
};
// for demo:
function swapValues() {
var oldStartVal = document.getElementById("startVal").value;
var oldEndVal = document.getElementById("endVal").value;
document.getElementById("startVal").value = oldEndVal;
document.getElementById("endVal").value = oldStartVal;
updateCodeVisualizer();
}
function getEasingFn() {
var fn = document.getElementById("easingFnsDropdown").value;
if (fn === 'easeOutExpo') return null;
if (typeof easingFunctions[fn] === 'undefined') return undefined;
return easingFunctions[fn];
}
function getEasingFnBody(fn) {
fn = typeof fn === 'undefined' ? getEasingFn() : fn;
if (typeof fn === 'undefined') return 'undefined function';
if (fn !== null) {
return fn.toString().replace(/^ {8}/gm, '');
}
return '';
}
function createCountUp() {
var startVal = document.getElementById("startVal").value;
startVal = Number(startVal.replace(',','').replace(' ',''));
var endVal = document.getElementById("endVal").value;
endVal = Number(endVal.replace(',','').replace(' ',''));
var decimals = document.getElementById("decimals").value,
duration = document.getElementById("duration").value,
prefix = document.getElementById("prefix").value,
suffix = document.getElementById("suffix").value,
easingFn = getEasingFn();
options = {
useEasing : useEasing,
easingFn : typeof easingFn === 'undefined' ? null : easingFn,
useGrouping : useGrouping,
separator : document.getElementById("separator").value,
decimal : document.getElementById("decimal").value,
prefix: prefix,
suffix: suffix
};
// you don't have to create a new instance of CountUp every time you start an animation,
// you can just change the properties individually. But I do here in case user changes values in demo.
demo = new CountUp("myTargetElement", startVal, endVal, decimals, duration, options);
if (useOnComplete) {
demo.start(methodToCallOnComplete);
} else {
demo.start();
}
updateCodeVisualizer();
}
function showCodeAndPauseResume() {
code = 'demo.pauseResume();';
document.getElementById("codeVisualizer").innerHTML = code;
demo.pauseResume();
}
function showCodeAndReset() {
code = 'demo.reset();';
document.getElementById("codeVisualizer").innerHTML = code;
demo.reset();
}
function showCodeAndUpdate() {
var updateVal = document.getElementById("updateVal").value;
var num = updateVal ? updateVal : 0;
demo.update(num);
}
function toggleOnComplete(checkbox) {
if (checkbox.checked) {
useOnComplete = true;
} else {
useOnComplete = false;
}
updateCodeVisualizer();
}
function toggleEasing(checkbox) {
var easingSection = document.getElementById("easingSection");
if (checkbox.checked) {
useEasing = true;
easingSection.style.display = "";
document.getElementById("easingFnsDropdown").value = "easeOutExpo";
document.getElementById("easingFnPreview").value = "";
} else {
useEasing = false;
easingSection.style.display = "none";
}
updateCodeVisualizer();
}
function toggleGrouping(checkbox) {
if (checkbox.checked) {
useGrouping = true;
} else {
useGrouping = false;
}
updateCodeVisualizer();
}
function methodToCallOnComplete() {
console.log('COMPLETE!');
alert('COMPLETE!');
}
function updateCodeVisualizer() {
var startVal = document.getElementById("startVal").value;
startVal = Number(startVal.replace(',','').replace(' ',''));
var endVal = document.getElementById("endVal").value;
endVal = Number(endVal.replace(',','').replace(' ',''));
var decimals = document.getElementById("decimals").value;
var duration = document.getElementById("duration").value;
var separator = document.getElementById("separator").value;
var decimal = document.getElementById("decimal").value;
var prefix = document.getElementById("prefix").value;
var suffix = document.getElementById("suffix").value;
var easingFn = getEasingFn();
var easingFnBody = getEasingFnBody(easingFn);
var code = '';
if (useEasing && easingFn) {
code += 'var easingFn = ';
var split = easingFnBody.split('\n');
for (var line in split) {
code += split[line].replace(' ', ' ') + '<br>';
}
}
code += 'var options = {<br>';
code += (useEasing) ? '  useEasing : true, <br>' : '  useEasing : false, <br>';
code += (easingFn && useEasing) ? '  easingFn: easingFn, <br>' : '';
code += (useGrouping) ? '  useGrouping : true, <br>' : '  useGrouping : false, <br>';
code += '  separator : \''+separator+'\', <br>';
code += '  decimal : \''+decimal+'\', <br>';
code += '  prefix : \''+prefix+'\', <br>';
code += '  suffix : \''+suffix+'\' <br>';
code += '};<br>';
code += 'var demo = new CountUp("myTargetElement", '+startVal+', '+endVal+', '+decimals+', '+duration+', options);<br>';
if (useOnComplete) {
code += 'demo.start(methodToCallOnComplete);';
} else {
code += 'demo.start();';
}
document.getElementById("codeVisualizer").innerHTML = code;
}
function updateCodeVisualizerForUpdate() {
var updateVal = document.getElementById("updateVal").value;
var num = updateVal ? updateVal : 0;
code = 'demo.update(' + updateVal + ');';
document.getElementById("codeVisualizer").innerHTML = code;
}
// get current star count
var repoInfoUrl = 'https://api.github.com/repos/inorganik/CountUp.js';
var getStars = new XMLHttpRequest();
getStars.open('GET', repoInfoUrl, true);
getStars.timeout = 5000;
getStars.onreadystatechange = function() {
// 2: received headers, 3: loading, 4: done
if (getStars.readyState == 4) {
if (getStars.status == 200) {
if (getStars.responseText !== 'undefined') {
if (getStars.responseText.length > 0) {
data = JSON.parse(getStars.responseText);
stars = data.stargazers_count;
// change input values
document.getElementById("startVal").value = 0;
document.getElementById("endVal").value = stars;
document.getElementById("decimals").value = 0;
// change code example values
updateCodeVisualizer();
// change the startVal and endVal properties of the demo CountUp and run it
demo.startVal = 0;
demo.endVal = stars;
demo.decimals = 0;
demo.start();
}
}
}
}
}
getStars.onerror = function() {
console.log('error: '+getStars.status)
demo.start();
}
</script>
</html>