Merge pull request #16 from Zhomart/master

added bower.json
sophilabs · Sep 1, 2014 · 4ee108b · 4ee108b
2 parents e91acb3 + a5929b6
commit 4ee108b
Show file tree

Hide file tree

Showing 4 changed files with 329 additions and 1 deletion.
diff --git a/bower.json b/bower.json
@@ -0,0 +1,30 @@
+{
+  "name": "jquery-counter",
+  "description": "A jQuery Counter Plugin.",
+  "version": "0.2.0",
+  "keywords": [ "countdown", "counter" ],
+  "homepage": "http://sophilabs.github.com/jquery-counter/",
+  "authors": [
+    { "name": "sophilabs", "email": "[email protected]" }
+  ],
+  "dependencies": {
+    "jquery" : ">= 1.7"
+  },
+  "devDependencies": {},
+  "license": "MIT",
+  "main": [
+    "./src/jquery.counter.js",
+    "./src/jquery.counter-analog.css",
+    "./src/jquery.counter-analog.png",
+    "./src/jquery.counter-analog2.png",
+    "./src/jquery.counter-analog2.css",
+    "./src/jquery.counter-analog3.png",
+    "./src/jquery.counter-analog3.css"
+  ],
+  "ignore": [
+    "*/.*",
+    "*.json",
+    "examples",
+    "*.md"
+  ]
+}
diff --git a/examples/simple.html b/examples/simple.html
@@ -7,12 +7,13 @@
 
     <link href="../src/jquery.counter-analog.css" media="screen" rel="stylesheet" type="text/css" />
     <link href="../src/jquery.counter-analog2.css" media="screen" rel="stylesheet" type="text/css" />
+    <link href="../src/jquery.counter-analog3.css" media="screen" rel="stylesheet" type="text/css" />
 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
     <script src="../src/jquery.counter.js" type="text/javascript"></script>
 
 </head>
-<body>
+<body style="background-color: #d77;">
     <h1>Examples</h1>
     <p>
         <span class="counter counter-analog" data-direction="down">0:10</span>
@@ -60,6 +61,18 @@ <h1>Style counter-analog2</h1>
     $('.counter').counter({});
     &lt;/script&gt;
     </pre>
+
+    <h1>Style counter-analog3</h1>
+    <p>
+        <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>
+    </p>
+    <pre>
+    &lt;span class="counter counter-analog3" data-direction="up" data-format="23:59:59.9" data-stop="00:00:10.0" data-interval="100"&gt;0:00.0&lt;/span&gt;
+    &lt;script&gt;
+    $('.counter').counter({});
+    &lt;/script&gt;
+    </pre>
+
     <h1>Full Javascript Initialization</h1>
     <p>
         <span id="custom"></span>

diff --git a/src/jquery.counter-analog3.css 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