forked from inorganik/countUp.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
153 lines (146 loc) · 6.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE 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="https://inorganik.github.io/assets/css/style.css?v=20210211">
<script src="demo/demo.js" type="module"></script>
<script nomodule src="dist/countUp.umd.js"></script>
<script nomodule src="demo/demo-nomodule.js"></script>
<script>
(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>
<a class="forkMe" href="https://github.com/inorganik/CountUp.js"><img src="https://inorganik.github.io/assets/img/forkme_custom_indigo.png" alt="Fork me on GitHub"></a>
<div id="wrap">
<header>
<div id="github"><a class="block" href="https://inorganik.github.io"></a></div>
<div class="leaderLine">////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////</div>
<div id="logo"><a class="block" href="https://inorganik.net"></a></div>
</header>
<section>
<div class="col full">
<h1>CountUp.js <small id="version" class="lt-gray"></small></h1>
</div>
<div class="col full">
<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/yarn using the package name <code class="indigo large">countup.js</code>.</p>
<p>🆒 Get updates about what I’m working on <a href="https://inorganik.net">here</a>!</p>
<h3 class="marginTop marginBottom"><a class="lime weight700" href="https://github.com/inorganik/CountUp.js">Download on Github</a></h3>
</div>
</section>
<section>
<p style="position:absolute; top:5px; left:0;">Current stars:</p>
<h1 class="jumbo" id="myTargetElement">0</h1>
</section>
<section id="errorSection" style="background-color:#FFDCDC; display:none" class="col-inner">
<h4 id="error" style="color: red" class="noMargin"></h4>
</section>
<section>
<form>
<h4 class="inlineLeft noMargin weight300">Params:</h4>
<div class="inlineLeft marginLeft marginRight">
<input type="text" value="0" id="startVal" style="width:80px" class="updateCodeVis">
<label class="inlineLabel">Start</label>
</div>
<input id="swapValues" type="button" class="inlineLeft marginRight" value="Swap" style="width:80px;">
<div class="inlineLeft marginRight">
<input type="text" value="94.62" id="endVal" style="width:80px" class="updateCodeVis">
<label class="inlineLabel">End</label>
</div>
<div class="inlineLeft marginRight">
<input type="number" value="0" id="decimalPlaces" step="1" style="width:50px" class="updateCodeVis">
<label class="inlineLabel">Decimal places</label>
</div>
<div class="inlineLeft marginRight">
<input type="number" value="2" id="duration" step=".1" style="width:50px" class="updateCodeVis">
<label class="inlineLabel">Duration</label>
</div>
</form>
</section>
<section>
<form>
<h4 class="inlineLeft noMargin weight300">Options:</h4>
<div class="inlineLeft marginLeft marginRight">
<input id="useEasing" type="checkbox" checked><label class="inlineLabel updateCodeVis">Use easing</label>
</div>
<div class="inlineLeft marginRight">
<input id="useGrouping" type="checkbox" checked><label class="inlineLabel updateVodeVis">Use grouping</label>
</div>
<div class="inlineLeft marginRight">
<input type="text" value="," id="separator" style="width:25px; padding:0 5px;" class="updateCodeVis">
<label class="inlineLabel">Separator</label>
</div>
<div class="inlineLeft marginRight">
<input type="text" value="." id="decimal" style="width:25px; padding:0 5px;" class="updateCodeVis">
<label class="inlineLabel">Decimal</label>
</div>
<div class="inlineLeft marginRight">
<input type="text" value="" id="prefix" style="width:50px; padding:0 5px;" class="updateCodeVis">
<label class="inlineLabel">Prefix</label>
</div>
<div class="inlineLeft marginRight">
<input type="text" value="" id="suffix" style="width:50px; padding:0 5px;" class="updateCodeVis">
<label class="inlineLabel">Suffix</label>
</div>
</form>
</section>
<section>
<form>
<h4 class="inlineLeft noMargin weight300">Methods:</h4>
<input type="button" value="Start" id="start" class="inlineLeft marginLeft marginRight">
<input type="button" value="Pause/Resume" id="pauseResume" class="inlineLeft marginRight">
<input type="button" value="Reset" id="reset" class="inlineLeft marginRight">
<input type="button" value="Update:" id="update" class="inlineLeft" style="margin-right:5px">
<div class="inlineLeft marginRight">
<input type="text" value="6789" id="updateVal" style="width:80px">
</div>
<div class="inlineLeft">
<input type="checkbox" id="useOnComplete"><label class="inlineLabel">Alert on complete</label>
</div>
</form>
</section>
<section id="easingSection">
<form>
<h4 class="inlineLeft noMargin weight300">Custom:</h4>
<div class="inlineLeft marginLeft">
<label class="inlineLabel">Easing: </label>
<select id="easingFnsDropdown" class="marginRight updateCodeVis">
<option value="easeOutExpo" selected>easeOutExpo (default, built-in)</option>
<option value="outQuintic">outQuintic</option>
<option value="outCubic">outCubic</option>
</select>
</div>
<div class="inlineLeft marginRight">
<label class="inlineLabel">Numerals: </label>
<select id="numeralsDropdown" class="updateCodeVis">
<option value="" selected>Default ("1234")</option>
<option value="ea">Eastern Arabic ("١٢٣٤")</option>
<option value="fa">Farsi ("۱۲۳۴")</option>
</select>
</div>
<div class="inlineLeft">
<input type="button" id="apply" value="Apply">
</div>
</form>
</section>
<section class="marginBottom">
<div class="col full marginBottom marginTop">
<div class="code-contain indigo">
<code id="codeVisualizer" class="indigo"></code>
</div>
</div>
</section>
</div>
</body>
</html>