/
demo-tinker.html
79 lines (68 loc) · 2.59 KB
/
demo-tinker.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
<html>
<head>
<title>Animini Tinker 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(/\n;/g, '\n');
}
</script>
<style>
#container1, #container2 {
position:relative;
height:0px;
width:12ex;
text-align:center;
font-size:2em;
color:purple;
}
</style>
</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><span><script>document.write(document.title)</script></span></h1>
<div style="height:3em">
<div id="container1"></div>
<div id="container2"></div>
</div>
<script>
var wc = document.getElementById('container1').offsetWidth;
var wh = document.getElementsByTagName('h1')[0].firstChild.offsetWidth;
var entering = 'top: 0px; left: '+wh+'px; opacity:0.0; text-shadow:20px 20px 40px #888;';
var current = 'top:10px; left: '+Math.round((wh-wc)/2)+'px; opacity:1.0; text-shadow: 0px 0px 0px #000;';
var leaving = 'top: 0px; left:'+(-wc)+'px; opacity:0.0; text-shadow:20px 20px 40px #888;';
var e = animini.expo.o;
var animIn = animini(entering, e, current, 500);
var animOut = animini(current, e, leaving, 500);
var list = 'Tinker,Tailor,Soldier,Sailor,Rich man,Poor man,Beggar man,Thief'.split(',');
var i = 0;
function enter(element) {
element.innerHTML = list[i++ % list.length];
animIn(element, leave);
}
function leave(element) {
animOut(element, enter);
}
// run the animation
enter(document.getElementById('container1'));
leave(document.getElementById('container2'));
// show the animation's source
showAnimationSource(
'var entering = "' + entering + '"',
'var current = "' + current + '"',
'var leaving = "' + leaving + '"',
'var e = animini.' + e._easing,
'var animIn = animini(entering, e, current, 500)',
'var animOut = animini(current, e, leaving, 500)',
'',
'function enter(element) { animIn(element, leave); }',
'function leave(element) { animOut(element, enter); }',
'',
'enter(document.getElementById("container1"))',
'leave(document.getElementById("container2"))'
);
</script>
</body>
</html>