Skip to content

Commit b8f4530

Browse files
author
Justin Sheckler
committed
Prototype of new flippy digit
1 parent fb8b053 commit b8f4530

1 file changed

Lines changed: 193 additions & 0 deletions

File tree

‎test.html‎

Lines changed: 193 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,193 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Flip Digits</title>
5+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
6+
<script src="transform/dist/jquery.transform-0.9.3.min.js"></script>
7+
<script src="./jquery.flapper.js"></script>
8+
<script language="javascript">
9+
$(document).ready(function() {
10+
11+
FlapDigit = function($ele) {
12+
this.digits = ['&nbsp;', 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '.', ',', ':', '$'];
13+
this.pos = 0;
14+
this.target = this.digits[0];
15+
this.interval = 150;
16+
this.timeout;
17+
this.animate = true;
18+
19+
this.$prev = $ele.find('.front.top, .back.bottom');
20+
this.$next = $ele.find('.back.top, .front.bottom');
21+
this.$back_top = $ele.find('.back.top');
22+
this.$back_bottom = $ele.find('.back.bottom');
23+
this.$front_top = $ele.find('.front.top');
24+
this.$front_bottom = $ele.find('.front.bottom');
25+
26+
this.initialize();
27+
}
28+
29+
FlapDigit.prototype = {
30+
31+
initialize: function() {
32+
this.$prev.html(this.digits[this.pos]);
33+
this.$next.html(this.digits[this.pos]);
34+
console.log(this);
35+
},
36+
37+
increment: function() {
38+
var _this = this;
39+
40+
var next = this.pos + 1;
41+
if (next >= this.digits.length) {
42+
next = 0;
43+
}
44+
45+
this.$prev.show().html(this.digits[this.pos]);
46+
this.$next.hide().html(this.digits[next]);
47+
48+
var speed1 = Math.floor(Math.random() * this.interval * .4 + this.interval * .4);
49+
var speed2 = Math.floor(Math.random() * this.interval * .1 + this.interval * .1);
50+
51+
if (this.animate) {
52+
this.$back_top.show();
53+
this.$front_bottom.transform({ scaleY: 0.0 });
54+
this.$front_top.transform({ scaleY: 1.0 }).stop().show().animate({ scaleY: 0.0 }, speed1, 'linear', function(){
55+
_this.$front_bottom.stop().show().animate({ scaleY: 1.0 }, speed2, 'linear');
56+
});
57+
} else {
58+
this.$front_top.hide();
59+
this.$back_top.show();
60+
if (this.timeout) {
61+
clearTimeout(this.timeout);
62+
}
63+
this.timeout = setTimeout(function(){
64+
this.$back_bottom.hide();
65+
this.$front_bottom.show();
66+
}, speed);
67+
}
68+
69+
this.pos = next;
70+
},
71+
72+
cycleTo: function(pos) {
73+
var _this = this;
74+
75+
if (this.interval_timer) {
76+
clearInterval(this.interval_timer);
77+
this.interval_timer = null;
78+
}
79+
80+
this.interval_timer = setInterval(function(){
81+
if (_this.pos == pos) {
82+
clearInterval(_this.interval_timer);
83+
_this.interval_timer = null;
84+
} else {
85+
_this.increment();
86+
}
87+
}, this.interval);
88+
}
89+
};
90+
91+
$('.display .digit').each(function() {
92+
var flap = new FlapDigit($(this));
93+
var rand = Math.floor(Math.random() * 9) + 1;
94+
flap.cycleTo(rand);
95+
96+
setInterval(function() {
97+
var rand = Math.floor(Math.random() * 9) + 1;
98+
flap.cycleTo(rand);
99+
}, 10000);
100+
101+
});
102+
});
103+
</script>
104+
<style type="text/css">
105+
106+
.display {
107+
margin: 20px auto;
108+
padding: 20px;
109+
text-align: center;
110+
}
111+
112+
.digit {
113+
position: relative;
114+
display: inline-block;
115+
border: 2px solid #222;
116+
border-radius: 8px;
117+
}
118+
119+
.digit,
120+
.digit div {
121+
height: 128px;
122+
width: 96px;
123+
text-align: center;
124+
background: black;
125+
color: white;
126+
margin: 0px;
127+
padding: 0px;
128+
font-family: Helvetica;
129+
font-size: 128px;
130+
line-height: 128px;
131+
}
132+
133+
.digit div {
134+
position: absolute;
135+
border-radius: 4px;
136+
}
137+
138+
.digit .top {
139+
top: 0px;
140+
left: 0px;
141+
overflow: hidden;
142+
clip: rect(0px, 96px, 62px, 0px);
143+
background-image: -webkit-gradient(linear, 0% 0%, 0% 30%, from(#444), to(#000));
144+
background-image: -moz-linear-gradient(top, #444, #000, #000, #000, #000, #000);
145+
}
146+
147+
.digit .bottom {
148+
bottom: 0px;
149+
left: 0px;
150+
overflow: hidden;
151+
clip: rect(66px, 96px, 128px, 0px);
152+
background-image: -webkit-gradient(linear, 0% 50%, 0% 80%, from(#444), to(#000));
153+
background-image: -moz-linear-gradient(top, #000, #000, #444, #444, #000, #000);
154+
}
155+
156+
</style>
157+
</head>
158+
<body>
159+
<div class="display">
160+
<div class="digit">
161+
<div class="back top">&nbsp;</div>
162+
<div class="back bottom">&nbsp;</div>
163+
<div class="front top">&nbsp;</div>
164+
<div class="front bottom">&nbsp;</div>
165+
</div>
166+
<div class="digit">
167+
<div class="back top">&nbsp;</div>
168+
<div class="back bottom">&nbsp;</div>
169+
<div class="front top">&nbsp;</div>
170+
<div class="front bottom">&nbsp;</div>
171+
</div>
172+
<div class="digit">
173+
<div class="back top">&nbsp;</div>
174+
<div class="back bottom">&nbsp;</div>
175+
<div class="front top">&nbsp;</div>
176+
<div class="front bottom">&nbsp;</div>
177+
</div>
178+
<div class="digit">
179+
<div class="back top">&nbsp;</div>
180+
<div class="back bottom">&nbsp;</div>
181+
<div class="front top">&nbsp;</div>
182+
<div class="front bottom">&nbsp;</div>
183+
</div>
184+
<div class="digit">
185+
<div class="back top">&nbsp;</div>
186+
<div class="back bottom">&nbsp;</div>
187+
<div class="front top">&nbsp;</div>
188+
<div class="front bottom">&nbsp;</div>
189+
</div>
190+
</div>
191+
</body>
192+
</html>
193+

0 commit comments

Comments
 (0)