-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
72 lines (63 loc) · 2.83 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
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Sonic Creator - Create your own canvas/gif/css3 loader</title>
<link rel="stylesheet" href="main.css" />
<script src="vendor/ace/ace.js"></script>
<script src="vendor/b64.js"></script>
<script src="vendor/LZWEncoder.js"></script>
<script src="vendor/NeuQuant.js"></script>
<script src="vendor/GIFEncoder.js"></script>
<script src="src/sonic.js"></script>
<script src="src/SonicGIFConverter.js"></script>
<script src="src/SonicSpriteConverter.js"></script>
<script src="gallery/manifest.js"></script>
</head>
<body>
<div id="editor"><div id="input"></div></div>
<div id="preview">
<h1>Sonic Creator</h1>
<p><small>Read the <a target="_blank" href="https://github.com/padolsey/Sonic/blob/master/README.md">Sonic README</a></small></p>
<p>With this tool you can create your own animated Sonic loader. Three graphics will appear below: An HTML5 Canvas running through <a target="_blank" href="https://github.com/padolsey/Sonic">Sonic</a>, a regular GIF, generated via a modified version of <a target="_blank" href="https://github.com/cadc/SonicGIF">SonicGIF</a> (using <a target="_blank" href="https://github.com/antimatter15/jsgif">jsgif</a>), and a PNG Sprite.</p>
<div class="ibox">
<h2>Sonic Canvas:</h2>
<p><small>Note: First run-through of frames will be slower</small></p>
<div id="sc"></div>
</div>
<div class="ibox">
<h2>GIF:</h2>
<p><small>Max: ~16 FPS [<a target="_blank" href="http://www.stykz.net/support/help/lessons/About_the_Animated_GIF_Format.php"> ? </a>]. Don't forget to <a href="http://www.gifreducer.com/" target="_blank">compress</a>.</small></p>
<div id="gif"></div>
</div>
<div class="bbox">
<h2>PNG Sprite:</h2>
<div id="sprite"></div>
<p><button id="view-css3">View the CSS3 to run this sprite</button></p>
</div>
<div class="bbox">
<h2>Gallery:</h2>
<div id="gallery"></div>
<p><a target="_blank" href="http://padolsey.net/p/Sonic/repo/demo/demo.html">More examples & inspiration here »</a></p>
</div>
</div>
<script src="src/sonicCreator.js"></script>
<script>
if (!window.location.hash.replace(/^#/,'')) {
window.location.hash = 'default';
} else {
window.onhashchange(); // trigger update
}
</script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-3768993-11']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>