Skip to content

Commit 7681dc7

Browse files
jayKayEssjayKayEss
committed
Switch animation mode from fast to slow automatically. Some homepage and CSS tweaks
1 parent 04f49bc commit 7681dc7

3 files changed

Lines changed: 126 additions & 139 deletions

File tree

‎css/flapper.css‎

Lines changed: 47 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
.flapper {
66
font-family: Roboto Condensed, sans-serif;
7+
font-weight: 300;
78
}
89

910
.flapper .digit {
@@ -47,6 +48,10 @@
4748
border-radius: 8px;
4849
}
4950

51+
.flapper.XXL .digit div {
52+
border-radius: 6px;
53+
}
54+
5055
.flapper.XXL .digit,
5156
.flapper.XXL .digit div {
5257
height: 128px;
@@ -56,7 +61,7 @@
5661
}
5762

5863
.flapper.XXL .digit .top {
59-
clip: rect(0px, 96px, 63px, 0px);
64+
clip: rect(0px, 96px, 64px, 0px);
6065
}
6166

6267
.flapper.XXL .digit .bottom {
@@ -75,6 +80,10 @@
7580
border-radius: 7px;
7681
}
7782

83+
.flapper.XL .digit div {
84+
border-radius: 5px;
85+
}
86+
7887
.flapper.XL .digit,
7988
.flapper.XL .digit div {
8089
height: 96px;
@@ -88,7 +97,7 @@
8897
}
8998

9099
.flapper.XL .digit .bottom {
91-
clip: rect(49px, 72px, 96px, 0px);
100+
clip: rect(48px, 72px, 96px, 0px);
92101
}
93102

94103
/* L 54x72 */
@@ -103,6 +112,10 @@
103112
border-radius: 6px;
104113
}
105114

115+
.flapper.L .digit div {
116+
border-radius: 4px;
117+
}
118+
106119
.flapper.L .digit,
107120
.flapper.L .digit div {
108121
height: 72px;
@@ -116,7 +129,7 @@
116129
}
117130

118131
.flapper.L .digit .bottom {
119-
clip: rect(37px, 54px, 72px, 0px);
132+
clip: rect(36px, 54px, 72px, 0px);
120133
}
121134

122135
/* M 40x54 (default) */
@@ -131,6 +144,10 @@
131144
border-radius: 5px;
132145
}
133146

147+
.flapper .digit div {
148+
border-radius: 3px;
149+
}
150+
134151
.flapper .digit,
135152
.flapper .digit div {
136153
height: 54px;
@@ -159,6 +176,10 @@
159176
border-radius: 4px;
160177
}
161178

179+
.flapper.S .digit div {
180+
border-radius: 2px;
181+
}
182+
162183
.flapper.S .digit,
163184
.flapper.S .digit div {
164185
height: 40px;
@@ -187,6 +208,10 @@
187208
border-radius: 3px;
188209
}
189210

211+
.flapper.XS .digit div {
212+
border-radius: 1px;
213+
}
214+
190215
.flapper.XS .digit,
191216
.flapper.XS .digit div {
192217
height: 30px;
@@ -208,44 +233,42 @@
208233
/* DARK (default) */
209234

210235
.flapper .digit {
211-
border: 2px solid black;
236+
border: 2px solid #333;
237+
background-color: #333;
212238
}
213239

214-
.flapper .digit,
215240
.flapper .digit div {
216-
background-color: black;
217241
color: white;
218242
padding: 0px;
219243
background: rgb(0,0,0); /* Old browsers */
220-
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(12,12,12,1) 40%, rgba(12,12,12,1) 60%, rgba(0,0,0,1) 100%); /* FF3.6+ */
221-
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,1)), color-stop(40%,rgba(12,12,12,1)), color-stop(60%,rgba(12,12,12,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
222-
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(12,12,12,1) 40%,rgba(12,12,12,1) 60%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
223-
background: -o-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(12,12,12,1) 40%,rgba(12,12,12,1) 60%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
224-
background: -ms-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(12,12,12,1) 40%,rgba(12,12,12,1) 60%,rgba(0,0,0,1) 100%); /* IE10+ */
225-
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(12,12,12,1) 40%,rgba(12,12,12,1) 60%,rgba(0,0,0,1) 100%); /* W3C */
226-
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
244+
background: -moz-linear-gradient(-45deg, rgba(0,0,0,1) 0%, rgba(17,17,17,1) 30%, rgba(0,0,0,1) 100%); /* FF3.6+ */
245+
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(30%,rgba(17,17,17,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
246+
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,1) 0%,rgba(17,17,17,1) 30%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
247+
background: -o-linear-gradient(-45deg, rgba(0,0,0,1) 0%,rgba(17,17,17,1) 30%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
248+
background: -ms-linear-gradient(-45deg, rgba(0,0,0,1) 0%,rgba(17,17,17,1) 30%,rgba(0,0,0,1) 100%); /* IE10+ */
249+
background: linear-gradient(135deg, rgba(0,0,0,1) 0%,rgba(17,17,17,1) 30%,rgba(0,0,0,1) 100%); /* W3C */
250+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
227251
}
228252

229253

230254
/* LIGHT */
231255

232256
.flapper.light .digit {
233-
border: 2px solid #efefef;
257+
border: 2px solid #eee;
258+
background-color: #eee;
234259
}
235260

236-
.flapper.light .digit,
237261
.flapper.light .digit div {
238-
background-color: #eee;
239262
color: black;
240263
padding: 0px;
241-
background: rgb(249,249,249); /* Old browsers */
242-
background: -moz-linear-gradient(left, rgba(249,249,249,1) 0%, rgba(255,255,255,1) 40%, rgba(255,255,255,1) 60%, rgba(249,249,249,1) 100%); /* FF3.6+ */
243-
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(249,249,249,1)), color-stop(40%,rgba(255,255,255,1)), color-stop(60%,rgba(255,255,255,1)), color-stop(100%,rgba(249,249,249,1))); /* Chrome,Safari4+ */
244-
background: -webkit-linear-gradient(left, rgba(249,249,249,1) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,1) 60%,rgba(249,249,249,1) 100%); /* Chrome10+,Safari5.1+ */
245-
background: -o-linear-gradient(left, rgba(249,249,249,1) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,1) 60%,rgba(249,249,249,1) 100%); /* Opera 11.10+ */
246-
background: -ms-linear-gradient(left, rgba(249,249,249,1) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,1) 60%,rgba(249,249,249,1) 100%); /* IE10+ */
247-
background: linear-gradient(to right, rgba(249,249,249,1) 0%,rgba(255,255,255,1) 40%,rgba(255,255,255,1) 60%,rgba(249,249,249,1) 100%); /* W3C */
248-
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#f9f9f9',GradientType=1 ); /* IE6-9 */
264+
background: rgb(255,255,255); /* Old browsers */
265+
background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(247,247,247,1) 30%, rgba(255,255,255,1) 100%); /* FF3.6+ */
266+
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(30%,rgba(247,247,247,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
267+
background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(247,247,247,1) 30%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
268+
background: -o-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(247,247,247,1) 30%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
269+
background: -ms-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(247,247,247,1) 30%,rgba(255,255,255,1) 100%); /* IE10+ */
270+
background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(247,247,247,1) 30%,rgba(255,255,255,1) 100%); /* W3C */
271+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
249272
}
250273

251274

‎index.html‎

Lines changed: 32 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -13,75 +13,50 @@
1313
var $header_display = $('#header_display');
1414
$header_display.flapper({
1515
width: 7,
16-
digits: {
17-
chars_preset: 'alpha',
18-
animation: 'slow',
19-
timing: 100
20-
}
21-
});
22-
23-
setTimeout(function(){
24-
$header_display.val('FLAPPER').change();
25-
var toggle = true;
26-
setInterval(function(){
27-
if (toggle) {
28-
$header_display.val('FLAPPER').change();
29-
} else {
30-
$header_display.val('').change();
31-
}
32-
toggle = !toggle;
33-
}, 7000);
34-
}, 1000);
35-
36-
$('#size_demo input').flapper({
37-
width: 1,
38-
digits: {
39-
chars: ['9']
40-
}
16+
chars_preset: 'alpha'
4117
});
4218

4319
var $demo_slow = $('#animation_demo input.slow');
44-
var $demo_medium = $('#animation_demo input.medium');
4520
var $demo_fast = $('#animation_demo input.fast');
4621

4722
var demo_timing = 500;
4823
var demo_chars = [' ','0','1','2','3','4','5','6','7','8','9'];
4924

5025
$demo_slow.flapper({
5126
width: 1,
52-
digits: {
53-
chars: demo_chars,
54-
timing: demo_timing,
55-
animation: 'slow'
56-
}
57-
});
58-
59-
$demo_medium.flapper({
60-
width: 1,
61-
digits: {
62-
chars: demo_chars,
63-
timing: demo_timing,
64-
animation: 'medium'
65-
}
27+
chars: demo_chars,
28+
timing: demo_timing,
6629
});
6730

6831
$demo_fast.flapper({
6932
width: 1,
70-
digits: {
71-
chars: demo_chars,
72-
timing: demo_timing,
73-
animation: 'fast'
74-
}
33+
chars: demo_chars,
34+
timing: demo_timing,
35+
transform: false
7536
});
7637

77-
$('#animation_demo button.play').click(function(){
78-
var $demos = $('#animation_demo input');
38+
var $demos = $('#animation_demo input');
39+
40+
setTimeout(function(){
41+
$header_display.val('FLAPPER').change();
7942
$demos.val(9).change();
80-
setTimeout(function(){
81-
$demos.val('').change();
82-
}, 7000);
83-
});
43+
var toggle = true;
44+
setInterval(function(){
45+
if (toggle) {
46+
$header_display.val('FLAPPER').change();
47+
$demos.val(9).change();
48+
} else {
49+
$header_display.val('').change();
50+
$demos.val('').change();
51+
}
52+
toggle = !toggle;
53+
}, 5000);
54+
}, 1000);
8455

56+
$('#size_demo input').flapper({
57+
width: 1,
58+
chars: ['9']
59+
});
8560
});
8661
</script>
8762
<style type="text/css">
@@ -324,7 +299,7 @@ <h1>Flapper is a jQuery plugin that replicates the
324299
rotated, a new symbol would fall into place. Flapper recreates this effect using CSS transformations.</p>
325300

326301
<p>Flapper can display words or numbers, with or without formatting. It's ready to use with six sizes,
327-
two color themes, and three animation styles. Best of all, it's written entirely in HTML and CSS,
302+
two color themes, and two animation styles. Best of all, it's written entirely in HTML and CSS,
328303
so you can make it look however you'd like.</p>
329304

330305
<p>For best results, Flapper requires the <a href="http://code.google.com/p/jquery-numberformatter/">numberformatter</a>
@@ -336,16 +311,14 @@ <h1>Flapper is a jQuery plugin that replicates the
336311
<div class="section">
337312

338313
<div id="animation_demo">
339-
<div class="display slow"><input class="slow L" /><label>slow</label></div>
340-
<div class="display medium"><input class="medium L" /><label>medium</label></div>
341-
<div class="display fast"><input class="fast L" /><label>fast</label></div>
342-
<div class="button"><button class="play">Play</button></div>
314+
<div class="display slow"><input class="slow L" /><label>with<br/>transform</label></div>
315+
<div class="display fast"><input class="fast L" /><label>without<br/>transform</label></div>
343316
</div>
344317

345-
<h2>Three Animation Effects</h2>
318+
<h2>Two Animation Effects</h2>
346319

347-
<p>Flapper's three animation modes allow you to design with special effects without affecting the performance
348-
of your page. Choose from gorgeous, detailed animations, quick minimalistic animations, or something in-between.</p>
320+
<p>Flapper's two animation modes allow you to design with special effects without affecting the performance
321+
of your page. Choose from gorgeous and detailed or quick and minimalistic.</p>
349322

350323
</div>
351324

0 commit comments

Comments
 (0)