-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
82 lines (68 loc) · 4.29 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Happy Birthday Vani</title>
<!-- If Chrome Frame is enabled, let's use it! -->
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="Description" content="Show Fireworks over London entirely in JavaScript using the Canvas tag." />
<!-- Load jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<!-- Load Canvas support for IE8 and below (IE9 support Canvas) -->
<!--[if lt IE 9]><script src="excanvas.js"></script><![endif]-->
<!-- jQuery UI is only used for the nice slider controls -->
<link type="text/css" href="../ui/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../ui/jquery-ui.js"></script>
<script type="text/javascript" src="../ui/ui.slider.js"></script>
<!-- Load the fireworks script and stylesheet -->
<script type="text/javascript" src="fireworks.js"></script>
<link type="text/css" href="fireworks.css" rel="stylesheet">
</head>
<body>
<h1>JavaScript Fireworks</h1>
<script type="text/javascript">
// we need a full screen canvas, but the canvas tag doesn't support percentage widths
// so we simply write out the canvas tag using javascript
document.write('<div style="background:url(images/background.jpg) repeat-x;position:absolute;left:0;top:'+($(window).height()-193)+'px;width:100%;height:200px;"></div>');
document.write('<canvas id="cv" width="'+$(window).width()+'" height="'+($(window).height()-100)+'" style="position:absolute;left:0;top:0;"></canvas>');
// obviously, this become wrong if the browser window changes size
// so we simply reload the page on resize
</script>
<div id="message" style="display:none;">
Number of items on the screen: <div id="fireCount">1</div>
<a href="http://kenneth.kufluk.com" target="_blank">© Kenneth Kufluk 2010</a>
<a href="http://github.com/kennethkufluk/js-fireworks" target="_blank">My code is open sourced at github.</a>
</div>
<div id="attributions" style="display:none;">
Panorama:<a href="http://www.flickr.com/photos/chrishudson/" target="_blank">flickr/ChrisH2006</a><br/>
Eye:<a href="http://www.flickr.com/photos/mcdemoura/" target="_blank">flickr/Márcio Cabral de Moura</a><br/>
Font: <a href="http://bitmapmania.m78.com/" target="_blank">BM Receipt</a> via <a href="http://cufon.shoqolate.com/generate/" target="_blank">Cufón Generator</a>
</div>
<div id="slider_firework_speed" style="display:none;"><span class="label" style="display:none;margin:10px 20px 10px -50px;">Speed</div>
<div id="slider_fragment_spread" style="display:none;"><span class="label" style="display:none;margin:10px 20px 10px -50px;">Blast Radius</div>
<div id="slider_gravity" style="display:none;"><span class="label" style="display:none;margin:10px 20px;">Gravity</div>
<div id="slider_framerate" style="display:none;"><span class="label" style="display:none;margin:20px 20px;">Framerate</span></div>
<div id="form" style="display:none;">
<form onsubmit="FireworkDisplay.launchText();return false;">
<div style="display:none;">
<span class="boxtext">Enter your own message and click Launch to see it written in Fireworks over London</span><br />
<input id="firetext" type="text" value="Happy Birthday to you Vani." />
<input id="launch" type="submit" value="Launch!" />
</div>
<div style="display:none;">
<span id="sendlink" class="boxtext">Copy this link:</span><input type="text" id="url" name="url" />
</div>
</form>
</div>
<script type="text/javascript">
// analytics tag to report visitors. We also report every message launched.
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6696309-2");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>