forked from DmitryBaranovskiy/raphaeljs.com
-
Notifications
You must be signed in to change notification settings - Fork 0
/
helvetica.html
47 lines (47 loc) · 2.08 KB
/
helvetica.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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Raphaël · Dancing Helvetica</title>
<link rel="stylesheet" href="demo.css" type="text/css" media="screen">
<link rel="stylesheet" href="demo-print.css" type="text/css" media="print">
<script src="raphael.js" type="text/javascript" charset="utf-8"></script>
<script src="helvetica.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css" media="screen">
#keycatcher {
position: absolute;
top: -9999em;
left: -9999em;
}
p {
text-align: center;
}
</style>
<script type="text/javascript" charset="utf-8">
// <!-- abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-=_+[]{}\|;':",./<>?`~!@#$%^&*() -->
window.onload = function () {
var r = Raphael("holder", 800, 600), pos = [0, 0];
var letter = r.path("M0,0L0,0z").attr({fill: "#fff", stroke: "#fff", "fill-opacity": .3, "stroke-width": 1, "stroke-linecap": "round", translation: "100 100"});
var kc = document.getElementById("keycatcher");
kc.onkeyup = function (e) {
var key = this.value.substring(this.value.length - 1);
this.value = "";
if (key && key in helvetica) {
letter.animate({path: helvetica[key]}, 200);
}
return false;
};
kc.onblur = function () {
kc.focus();
};
kc.focus();
};
</script>
</head>
<body>
<p>Type something.</p>
<input type="text" value="" id="keycatcher">
<div id="holder"></div>
<p id="copy">Demo of <a href="http://raphaeljs.com/">Raphaël</a>—JavaScript Vector Library</p>
</body>
</html>