Examples

0:10 @@ -60,6 +61,18 @@

Style counter-analog2

Style counter-analog3

+ 0:00.0 +

+    <span class="counter counter-analog3" data-direction="up" data-format="23:59:59.9" data-stop="00:00:10.0" data-interval="100">0:00.0</span>
+    <script>
+    $('.counter').counter({});
+    </script>
+    

Full Javascript Initialization

diff --git a/src/jquery.counter-analog3.css b/src/jquery.counter-analog3.css new file mode 100644 index 0000000..1b0a4c5 --- /dev/null +++ b/src/jquery.counter-analog3.css @@ -0,0 +1,285 @@ +.counter-analog3 span.part { + display: inline-block; +} + +.counter-analog3 span.separator { + display: inline-block; + height: 45px; + line-height: 45px; + width: 10px; + vertical-align: middle; + text-align: center; + font-weight: bold; +} + +.counter-analog3 span.part span.digit { + display: inline-block; + height: 45px; + line-height: 45px; + width: 33px; + vertical-align: middle; + text-align: center; + font: 0/0 a; + text-shadow: none; + color: transparent; + margin: 0; +} + +.counter-analog3 span.part span.digit { + background: transparent url("jquery.counter-analog3.png") 0 0 repeat-y; +} + +.counter-analog3 span.part span.digit0 { background-position: 0 0; } +.counter-analog3 span.part span.digit1 { background-position: 0 -270px; } +.counter-analog3 span.part span.digit2 { background-position: 0 -540px; } +.counter-analog3 span.part span.digit3 { background-position: 0 -810px; } +.counter-analog3 span.part span.digit4 { background-position: 0 -1080px; } +.counter-analog3 span.part span.digit5 { background-position: 0 -1350px; } +.counter-analog3 span.part span.digit6 { background-position: 0 -1620px; } +.counter-analog3 span.part span.digit7 { background-position: 0 -1890px; } +.counter-analog3 span.part span.digit8 { background-position: 0 -2160px; } +.counter-analog3 span.part span.digit9 { background-position: 0 -2430px; } + +/* UP */ +@-webkit-keyframes counter-analog3-01 { from { background-position: 0 0; } + to { background-position: 0 -270px; }} +@-moz-keyframes counter-analog3-01 { from { background-position: 0 0; } + to { background-position: 0 -270px; }} +@-ms-keyframes counter-analog3-01 { from { background-position: 0 0; } + to { background-position: 0 -270px; }} + +@-webkit-keyframes counter-analog3-12 { from { background-position: 0 -270px; } + to { background-position: 0 -540px; }} +@-moz-keyframes counter-analog3-12 { from { background-position: 0 -270px; } + to { background-position: 0 -540px; }} +@-ms-keyframes counter-analog3-12 { from { background-position: 0 -270px; } + to { background-position: 0 -540px; }} + +@-webkit-keyframes counter-analog3-23 { from { background-position: 0 -540px; } + to { background-position: 0 -810px; }} +@-moz-keyframes counter-analog3-23 { from { background-position: 0 -540px; } + to { background-position: 0 -810px; }} +@-ms-keyframes counter-analog3-23 { from { background-position: 0 -540px; } + to { background-position: 0 -810px; }} + +@-webkit-keyframes counter-analog3-34 { from { background-position: 0 -810px; } + to { background-position: 0 -1080px; }} +@-moz-keyframes counter-analog3-34 { from { background-position: 0 -810px; } + to { background-position: 0 -1080px; }} +@-ms-keyframes counter-analog3-34 { from { background-position: 0 -810px; } + to { background-position: 0 -1080px; }} + +@-webkit-keyframes counter-analog3-45 { from { background-position: 0 -1080px; } + to { background-position: 0 -1350px; }} +@-moz-keyframes counter-analog3-45 { from { background-position: 0 -1080px; } + to { background-position: 0 -1350px; }} +@-ms-keyframes counter-analog3-45 { from { background-position: 0 -1080px; } + to { background-position: 0 -1350px; }} + +@-webkit-keyframes counter-analog3-56 { from { background-position: 0 -1350px; } + to { background-position: 0 -1620px; }} +@-moz-keyframes counter-analog3-56 { from { background-position: 0 -1350px; } + to { background-position: 0 -1620px; }} +@-ms-keyframes counter-analog3-56 { from { background-position: 0 -1350px; } + to { background-position: 0 -1620px; }} + +@-webkit-keyframes counter-analog3-67 { from { background-position: 0 -1620px; } + to { background-position: 0 -1890px; }} +@-moz-keyframes counter-analog3-67 { from { background-position: 0 -1620px; } + to { background-position: 0 -1890px; }} +@-ms-keyframes counter-analog3-67 { from { background-position: 0 -1620px; } + to { background-position: 0 -1890px; }} + +@-webkit-keyframes counter-analog3-78 { from { background-position: 0 -1890px; } + to { background-position: 0 -2160px; }} +@-moz-keyframes counter-analog3-78 { from { background-position: 0 -1890px; } + to { background-position: 0 -2160px; }} +@-ms-keyframes counter-analog3-78 { from { background-position: 0 -1890px; } + to { background-position: 0 -2160px; }} + +@-webkit-keyframes counter-analog3-89 { from { background-position: 0 -2160px; } + to { background-position: 0 -2430px; }} +@-moz-keyframes counter-analog3-89 { from { background-position: 0 -2160px; } + to { background-position: 0 -2430px; }} +@-ms-keyframes counter-analog3-89 { from { background-position: 0 -2160px; } + to { background-position: 0 -2430px; }} + +@-webkit-keyframes counter-analog3-90 { from { background-position: 0 -2430px; } + to { background-position: 0 -2400px; }} +@-moz-keyframes counter-analog3-90 { from { background-position: 0 -2430px; } + to { background-position: 0 -2400px; }} +@-ms-keyframes counter-analog3-90 { from { background-position: 0 -2430px; } + to { background-position: 0 -2400px; }} + +.counter-analog3 span.part span.digit01 { + -webkit-animation: counter-analog3-01 .3s steps(6, end) 1; + -moz-animation: counter-analog3-01 .3s steps(6, end) 1; + -ms-animation: counter-analog3-01 .3s steps(6, end) 1; +} +.counter-analog3 span.part span.digit12 { + -webkit-animation: counter-analog3-12 .3s steps(6, end) 1; + -moz-animation: counter-analog3-12 .3s steps(6, end) 1; + -ms-animation: counter-analog3-12 .3s steps(6, end) 1; +} +.counter-analog3 span.part span.digit23 { + -webkit-animation: counter-analog3-23 .3s steps(6, end) 1; + -moz-animation: counter-analog3-23 .3s steps(6, end) 1; + -ms-animation: counter-analog3-23 .3s steps(6, end) 1; +} +.counter-analog3 span.part span.digit34 { + -webkit-animation: counter-analog3-34 .3s steps(6, end) 1; + -moz-animation: counter-analog3-34 .3s steps(6, end) 1; + -ms-animation: counter-analog3-34 .3s steps(6, end) 1; +} +.counter-analog3 span.part span.digit45 { + -webkit-animation: counter-analog3-45 .3s steps(6, end) 1; + -moz-animation: counter-analog3-45 .3s steps(6, end) 1; + -ms-animation: counter-analog3-45 .3s steps(6, end) 1; +} +.counter-analog3 span.part span.digit56 { + -webkit-animation: counter-analog3-56 .3s steps(6, end) 1; + -moz-animation: counter-analog3-56 .3s steps(6, end) 1; + -ms-animation: counter-analog3-56 .3s steps(6, end) 1; +} +.counter-analog3 span.part span.digit67 { + -webkit-animation: counter-analog3-67 .3s steps(6, end) 1; + -moz-animation: counter-analog3-67 .3s steps(6, end) 1; + -ms-animation: counter-analog3-67 .3s steps(6, end) 1; +} +.counter-analog3 span.part span.digit78 { + -webkit-animation: counter-analog3-78 .3s steps(6, end) 1; + -moz-animation: counter-analog3-78 .3s steps(6, end) 1; + -ms-animation: counter-analog3-78 .3s steps(6, end) 1; +} +.counter-analog3 span.part span.digit89 { + -webkit-animation: counter-analog3-89 .3s steps(6, end) 1; + -moz-animation: counter-analog3-89 .3s steps(6, end) 1; + -ms-animation: counter-analog3-89 .3s steps(6, end) 1; +} +.counter-analog3 span.part span.digit90 { + -webkit-animation: counter-analog3-90 .3s steps(6, end) 1; + -moz-animation: counter-analog3-90 .3s steps(6, end) 1; + -ms-animation: counter-analog3-90 .3s steps(6, end) 1; +} + +/* DOWN */ +@-webkit-keyframes counter-analog3-10 { from { background-position: 0 -270px; } + to { background-position: 0 0; }} +@-moz-keyframes counter-analog3-10 { from { background-position: 0 -270px; } + to { background-position: 0 0; }} +@-ms-keyframes counter-analog3-10 { from { background-position: 0 -270px; } + to { background-position: 0 0; }} + +@-webkit-keyframes counter-analog3-21 { from { background-position: 0 -540px; } + to { background-position: 0 -270px; }} +@-moz-keyframes counter-analog3-21 { from { background-position: 0 -540px; } + to { background-position: 0 -270px; }} +@-ms-keyframes counter-analog3-21 { from { background-position: 0 -540px; } + to { background-position: 0 -270px; }} + +@-webkit-keyframes counter-analog3-32 { from { background-position: 0 -810px; } + to { background-position: 0 -540px; }} +@-moz-keyframes counter-analog3-32 { from { background-position: 0 -810px; } + to { background-position: 0 -540px; }} +@-ms-keyframes counter-analog3-32 { from { background-position: 0 -810px; } + to { background-position: 0 -540px; }} + +@-webkit-keyframes counter-analog3-43 { from { background-position: 0 -1080px; } + to { background-position: 0 -810px; }} +@-moz-keyframes counter-analog3-43 { from { background-position: 0 -1080px; } + to { background-position: 0 -810px; }} +@-ms-keyframes counter-analog3-43 { from { background-position: 0 -1080px; } + to { background-position: 0 -810px; }} + +@-webkit-keyframes counter-analog3-54 { from { background-position: 0 -1350px; } + to { background-position: 0 -1080px; }} +@-moz-keyframes counter-analog3-54 { from { background-position: 0 -1350px; } + to { background-position: 0 -1080px; }} +@-ms-keyframes counter-analog3-54 { from { background-position: 0 -1350px; } + to { background-position: 0 -1080px; }} + +@-webkit-keyframes counter-analog3-65 { from { background-position: 0 -1620px; } + to { background-position: 0 -1350px; }} +@-moz-keyframes counter-analog3-65 { from { background-position: 0 -1620px; } + to { background-position: 0 -1350px; }} +@-ms-keyframes counter-analog3-65 { from { background-position: 0 -1620px; } + to { background-position: 0 -1350px; }} + +@-webkit-keyframes counter-analog3-76 { from { background-position: 0 -1890px; } + to { background-position: 0 -1620px; }} +@-moz-keyframes counter-analog3-76 { from { background-position: 0 -1890px; } + to { background-position: 0 -1620px; }} +@-ms-keyframes counter-analog3-76 { from { background-position: 0 -1890px; } + to { background-position: 0 -1620px; }} + +@-webkit-keyframes counter-analog3-87 { from { background-position: 0 -2160px; } + to { background-position: 0 -1890px; }} +@-moz-keyframes counter-analog3-87 { from { background-position: 0 -2160px; } + to { background-position: 0 -1890px; }} +@-ms-keyframes counter-analog3-87 { from { background-position: 0 -2160px; } + to { background-position: 0 -1890px; }} + +@-webkit-keyframes counter-analog3-98 { from { background-position: 0 -2430px; } + to { background-position: 0 -2160px; }} +@-moz-keyframes counter-analog3-98 { from { background-position: 0 -2430px; } + to { background-position: 0 -2160px; }} +@-ms-keyframes counter-analog3-98 { from { background-position: 0 -2430px; } + to { background-position: 0 -2160px; }} + +@-webkit-keyframes counter-analog3-09 { from { background-position: 0 -2400px; } + to { background-position: 0 -2430px; }} +@-moz-keyframes counter-analog3-09 { from { background-position: 0 -2400px; } + to { background-position: 0 -2430px; }} +@-ms-keyframes counter-analog3-09 { from { background-position: 0 -2400px; } + to { background-position: 0 -2430px; }} + +.counter-analog3 span.part span.digit10 { + -webkit-animation: counter-analog3-10 .3s steps(6, end) 1; + -moz-animation: counter-analog3-10 .3s steps(6, end) 1; + -ms-animation: counter-analog3-10 .3s steps(6, end) 1; +} +.counter-analog3 span.part span.digit21 { + -webkit-animation: counter-analog3-21 .3s steps(6, end) 1; + -moz-animation: counter-analog3-21 .3s steps(6, end) 1; + -ms-animation: counter-analog3-21 .3s steps(6, end) 1; +} +.counter-analog3 span.part span.digit32 { + -webkit-animation: counter-analog3-32 .3s steps(6, end) 1; + -moz-animation: counter-analog3-32 .3s steps(6, end) 1; + -ms-animation: counter-analog3-32 .3s steps(6, end) 1; +} +.counter-analog3 span.part span.digit43 { + -webkit-animation: counter-analog3-43 .3s steps(6, end) 1; + -moz-animation: counter-analog3-43 .3s steps(6, end) 1; + -ms-animation: counter-analog3-43 .3s steps(6, end) 1; +} +.counter-analog3 span.part span.digit54 { + -webkit-animation: counter-analog3-54 .3s steps(6, end) 1; + -moz-animation: counter-analog3-54 .3s steps(6, end) 1; + -ms-animation: counter-analog3-54 .3s steps(6, end) 1; +} +.counter-analog3 span.part span.digit65 { + -webkit-animation: counter-analog3-65 .3s steps(6, end) 1; + -moz-animation: counter-analog3-65 .3s steps(6, end) 1; + -ms-animation: counter-analog3-65 .3s steps(6, end) 1; +} +.counter-analog3 span.part span.digit76 { + -webkit-animation: counter-analog3-76 .3s steps(6, end) 1; + -moz-animation: counter-analog3-76 .3s steps(6, end) 1; + -ms-animation: counter-analog3-76 .3s steps(6, end) 1; +} +.counter-analog3 span.part span.digit87 { + -webkit-animation: counter-analog3-87 .3s steps(6, end) 1; + -moz-animation: counter-analog3-87 .3s steps(6, end) 1; + -ms-animation: counter-analog3-87 .3s steps(6, end) 1; +} +.counter-analog3 span.part span.digit98 { + -webkit-animation: counter-analog3-98 .3s steps(6, end) 1; + -moz-animation: counter-analog3-98 .3s steps(6, end) 1; + -ms-animation: counter-analog3-98 .3s steps(6, end) 1; +} +.counter-analog3 span.part span.digit09 { + -webkit-animation: counter-analog3-09 .3s steps(6, end) 1; + -moz-animation: counter-analog3-09 .3s steps(6, end) 1; + -ms-animation: counter-analog3-09 .3s steps(6, end) 1; +} diff --git a/src/jquery.counter-analog3.png b/src/jquery.counter-analog3.png new file mode 100644 index 0000000..1b9d56a Binary files /dev/null and b/src/jquery.counter-analog3.png differ