forked from yairEO/pathAnimator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
61 lines (57 loc) · 7.85 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
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta charset="utf-8">
<title>PathAnimator</title>
<meta name="description" content="">
<meta name="author" content="Yair Even Or">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="xxx" />
<link rel="stylesheet" href="styles.css">
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
<header>
<a class='by' href='http://dropthebit.com/592/pathanimator-moving-along-an-svg-path/'>dropthebit.com ⋆ Yair Even Or ⋆ 2013</a>
<a class='git' title='Check it out on Github' href='https://github.com/yairEO/pathAnimator/'><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAAA5CAYAAAD++yN2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjREREVBOUQ3OUUwMTFFMkJENTJGNDU2OTRDRjFGQ0QiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjREREVBOUU3OUUwMTFFMkJENTJGNDU2OTRDRjFGQ0QiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpCNERERUE5Qjc5RTAxMUUyQkQ1MkY0NTY5NENGMUZDRCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpCNERERUE5Qzc5RTAxMUUyQkQ1MkY0NTY5NENGMUZDRCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pgu7hagAAA1MSURBVHja7F0JdJXF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"></a>
</header>
<menu>
<label><input type='checkbox' id='showPath'>Show SVG Path</label>
<br><br>
<button id='addWalker'>Add Another</button>
<div class='walkerController'>
<button class='delete' title='Remove This Walker Instance'>×</button>
<label>
<input type='checkbox'>
<button class='stopPlay'></button>
</label>
<label>
<input type='checkbox'>
<button class='reverse'></button>
</label>
<select>
<option value=''>No Easing</option>
<option value='Math.pow(t,3)'>easeInCubic</option>
<option value='1-Math.pow(1-t,3)'>easeOutCubic</option>
<option value='Math.pow(2,-10*t) * Math.sin((t-2/4)*(2*Math.PI)/2) + 1'>easeOutElastic</option>
<option value='t*t'>easeInQuad</option>
<option value='t*(2-t)'>easeOutQuad</option>
<option value='t<.5 ? 2*t*t : -1+(4-2*t)*t'>easeInOutQuad</option>
<option value='t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t'>easeInOutQuart</option>
</select>
<br>
<input class='speed' type="range" min="1" max="100" step="1" value="30">
<span>Time (s)</span>
<!--<input class='speed' type='number'>-->
</div>
</menu>
<div class='maze'>
<div class='walker'>▶</div>
<object id='svgPath' data="path.svg" width="596" height="660" type="image/svg+xml"></object>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src='js/pathAnimator.js'></script>
<script src='js/main.js'></script>
</body>
</html>