-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
49 lines (41 loc) · 2.05 KB
/
index.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
<html>
<head>
<title>Bubbles</title>
<style type="text/css">
body { background: #f5f5f5 url(bubbles-bg.png) left top; padding:0; margin:0;}
.fonta {font-family: 'Coustard', serif;}
.fontb {font-family: 'Carter One', sans-serif;}
.fontc {font-family: 'Comfortaa', cursive;}
.fontd {font-family: 'Open Sans', sans-serif;}
.bubbledata,
.bubblelabel { color:white; position:absolute; text-align:center; line-height:1em;}
.fontb.bubbledata { margin-top:-10px;}
</style>
<script src="raphael-min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="raphael.makeBubble.js" type="text/javascript"></script>
<script src="fonts.js" type="text/javascript"></script>
</head>
<body>
<div id="content" style="position:absolute; width:981px; margin-left:-480px; left:50%;">
<div style="position:relative; z-index:10;" class="bubbletexts" id="bubbletexts"></div>
<div id="bubbles" style="width:100%; position:relative; z-index:0;"></div>
</div>
<script type="text/javascript">
/*
makeBubble( x origin, y origin, radius, color index, animation order, data, label, data class, label class, strong output );
*/
var paper = Raphael(document.getElementById('bubbles'), 981, 302);
paper.bubbleDefaults.labelClass += ' fontb';
paper.makeBubble(84, 108, 60, 0, 5, '98', 'courses', 'fontc')
.makeBubble(163, 196, 75, 1, 4, '79', 'scheduled races', 'fontb',null,true)
.makeBubble(322, 160, 103, 2, 3, '2,425', 'miles raced this year', 'fontc')
.makeBubble(457, 214, 58, 0, 2, '323', 'riders', 'fonta')
.makeBubble(516, 112, 68, 3, 1, '560', 'laps raced this year', 'fontc')
.makeBubble(634, 180, 75, 1, 2, '5', 'active series', 'fontb',null,true)
.makeBubble(749, 222, 58, 3, 3, '23', 'time trials', 'fonta')
.makeBubble(789, 107, 74, 0, 4, '3,223', 'points awarded', 'fontc')
.makeBubble(898, 158, 58, 2, 5, '750', 'past races', 'fonta');
</script>
</body>
</html>