/
demo-clock.html
88 lines (76 loc) · 3.34 KB
/
demo-clock.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
<html>
<head>
<title>Animini Clock Demo</title>
<script src="animini.min.js"></script>
<link rel="stylesheet" type="text/css" href="demo.css" />
<script>
function showAnimationSource() {
var o = document.body.appendChild(document.createElement('pre')).appendChild(document.createElement('code'));
o.innerText = (Array.prototype.join.call(arguments, ';\n') + ';').replace(/(\s*);(\s*)(?=;)/g, '$1$2');
}
</script>
</head>
<body>
<a href="http://github.com/roysharon/animini"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/30f550e0d38ceb6ef5b81500c64d970b7fb0f028/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub"></a>
<h1><script>document.write(document.title)</script></h1>
<script>
// CSS3 transform (2D) is still experimental, although all modern browsers support it:
// IE 9, FF 3.5, Chrome 4.0, Safari 3.1, iOS Safari 3.2, Android Browser 2.1, Opera 10.5, Opera Mobile 11.0
// However, to use it, one needs to add a browser-specific prefix. For example: -webkit-transform.
// The following function determines the correct transform style property name:
function getTransform() {
var m = /\bmsie.(\d+\.\d+)/i.exec(navigator.userAgent);
if (!m || parseFloat(m[1]) >= 9) {
var v = 'transform';
if (window.getComputedStyle) {
var o = document.body;
if (o) {
var s = window.getComputedStyle(o, null);
if (s.transform == undefined) {
if (s.WebkitTransform != undefined) v = '-webkit-' + v;
else if (s.MozTransform != undefined) v = '-moz-' + v;
else if (s.OTransform != undefined) v = '-o-' + v;
else if (s.MsTransform != undefined) v = '-ms-' + v;
else v = undefined;
}
}
}
}
return v;
}
var transform = getTransform();
if (transform) {
// create the clock
function createNumber(num) {
var d = Math.round((num % 12) * 30);
var t = transform + ':rotate(' + d + 'deg)';
document.write('<div style="position:absolute; width:150px; height:150px; text-align:center;' + t + '">' + num + '</div>');
}
document.write('<div id="myDiv" style="margin:50px; width:150px; height:150px;">');
for (var i = 1; i <= 12; ++i) createNumber(i);
document.write('</div>');
// build the animation
var s1 = 'color:#ffce00; ' + transform + ':scaleY(1.2) skew(-20deg, -20deg) rotate( 0deg)';
var s2 = 'color:#a28400; ' + transform + ':scaleY(0.7) skew( 40deg, -20deg) rotate(360deg)';
var e = animini.cubic.io;
var animation = animini(s1, 3000, e, s2, 250, s2, 3000, e, s1, 250);
// show the animation's source
showAnimationSource(
'var s1 = "' + s1 + '"',
'var s2 = "' + s2 + '"',
'var e = animini.' + e._easing,
'var animation = animini(s1, 3000, e, s2, 250, s2, 3000, e, s1, 250)',
'animation("myDiv", animation)'
);
// run the animation
animation('myDiv', animation);
} else {
document.write('<h3>It seems your browser does not support the new CSS3 transform style. Sorry.</h3>');
document.write('Please try this demo again with one of the following browsers:<ul>');
var a = 'Chrome 4.0, Firefox 3.5, Safari 3.1, iOS Safari 3.2, Android Browser 2.1, IE 9, Opera 10.5, Opera Mobile 11.0'.split(/, /g);
for (var i = 0; i < a.length; ++i) document.write('<li>' + a[i] + '+</li>');
document.write('</ul>');
}
</script>
</body>
</html>