-
Notifications
You must be signed in to change notification settings - Fork 6
/
test2.html
77 lines (68 loc) · 2.27 KB
/
test2.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
<style>
/* styles */
body {
font-family: Helvetica;
}
</style>
<div style="">
<div style="position:relative; margin: 20px; padding: 20px; width: 240px;">
<div style="margin: 20px 0px;">
Shimmer in Canvas
</div>
<div style="position: absolute; padding: 40px 30px 10px 30px; border: 1px solid #ccc; background-image:url('shimmer.jpg'); ">
<canvas id="shimmer" height="120" width="250"></canvas>
</div>
</div>
<div style="position:relative; margin: 20px; margin-top:150px; padding: 20px; width: 240px;">
<div style="margin: 20px 0px;">
Shimmer in Canvas 2
</div>
<div style="position: absolute; padding: 40px 30px 10px 30px; border: 1px solid #ccc; background-image:url('shimmer.jpg'); ">
<canvas id="shimmer2" height="120" width="250"></canvas>
</div>
</div>
</div>
<script src="shimmer.js" type="text/javascript"></script>
<script>
// Crockfords create shim:
if (typeof Object.create !== 'function') {
Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
};
}
// requestAnim shim layer by Paul Irish
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(/* function */ callback, /* DOMElement */ element){
window.setTimeout(callback, 1000 / 60);
};
})();
Shimmer2 = Object.create(Shimmer);
Shimmer.settings({
'canvas': 'shimmer',
'text' : 'Shimmer',
'font': '36pt Helvetica',
'animations': ['slide','slide','slide','glow']
});
function animate() {
requestAnimFrame( animate );
Shimmer.on();
};
animate();
Shimmer2.settings({
'canvas': 'shimmer2',
'text' : 'Shimmerasdfdsaf',
'font': '36pt Helvetica',
'animations': ['glow','slide','glow']
});
(function animate2(){
requestAnimFrame( animate2 );
Shimmer2.on();
}());
</script>