-
Notifications
You must be signed in to change notification settings - Fork 13
/
index.html
35 lines (35 loc) · 1.72 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
<html>
<head>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div id="content">
<h1 id="title">
Animator <small>An HTML5 sprite sheet animator</small>
</h1>
<p id="forkme">
<strong>Fork me on Github!</strong> <a href="http://github.com/calhoun137/animator">http://github.com/calhoun137/animator</a>
</p>
<p>
Drag & drop a sprite sheet onto the space below, set the total number of frames in the X and Y direction, and then click animate! If you would like to animate a specific set of frames, you can do so using the frames field in two ways; note that frames are counted from 0, starting in the top left hand corner. If, for example, you would like to start the animation on frame 0 and end on frame 2: write 0,2 in the frames field. If you would like to animate frame 0, then frame 1, then frame 2, and then frame 1 again: write 0,1,2,1 in the frames field. If the frames field is left blank, then the entire sprite sheet will be animated.
<em>
This demo uses a couple of HTML5 APIs, and it is only compatible with modern browsers.
</em>
</p>
<div id="parameters">
Number of X-Frames: <input type="text" id="frames-X" value="3"/>
Number of Y-Frames: <input type="text" id="frames-Y" value="9"/>
Interval(ms): <input type="text" id="interval" value="100"/>
Frames: <input type="text" id="frames"/>
<input id="animate" type="submit" value="ANIMATE!" />
</div>
<div id="animation-area"></div>
<div id="drop-area">
<img id="dropbox" src="kit_from_firefox.png" />
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="animator.js"></script>
<script src="dragdrop.js"></script>
</body>
</html>