-
Notifications
You must be signed in to change notification settings - Fork 0
/
animations.html
108 lines (106 loc) · 6.19 KB
/
animations.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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript" SRC="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".gif-player").hide();
$("preview-animation-1").click(function(){
$(".gif-player").fadeTo("fast",.95);
$(".gif-player img").attr("src","img/animation-group1/ladder fall.gif");
});
$("preview-animation-2").click(function(){
$(".gif-player").fadeTo("fast",.95);
$(".gif-player img").attr("src","img/animation-group1/walking.gif");
});
$("preview-animation-3").click(function(){
$(".gif-player").fadeTo("fast",.95);
$(".gif-player img").attr("src","img/animation-group1/running.gif");
});
$("preview-animation-4").click(function(){
$(".gif-player").fadeTo("fast",.95);
$(".gif-player img").attr("src","img/animation-group1/knockout.gif");
});
$("preview-animation-5").click(function(){
$(".gif-player").fadeTo("fast",.95);
$(".gif-player img").attr("src","img/animation-group1/smoking.gif");
});
$("close-button").click(function(){
$(".gif-player").fadeOut("medium");
});
});
</script>
</head>
<center>
<body>
<div class = "header"></div>
<div class = "menu">
<a href = "index.html"><div class = "menu-home"></div></a>
<a href = "stickfigures.html"><div class = "menu-stickfigures"></div></a>
<a href = "animations.html"><div class = "menu-animations-active"></div></a>
<a href = "tutorials.html"><div class = "menu-tutorials"></div></a>
<a href = "about.html"><div class = "menu-about"></div></a>
</div>
<div class = "contents">
<div style="display:block;position:absolute; text-align:left;margin-left:20px;width:800px;margin-top:10px;text-align:justify;font-size:16px;">
Below are animations that is created in Twigmax Animator. Click preview to watch the animation. Click download tpf file to download the animation and open in Twigmax Animator.
</div>
<div style="position:absolute;width:281px;text-align:center;margin-top:60px;">
<font style="font-size:17px;font-weight:bold;"><stickname>Ladder fall</stickname></font><br>
<font style="font-size:13px;"><stickcreator>(Animation by: the creator)</stickcreator></font>
<img src = "img/animation-group1/ladder fall-s.gif">
<font style="font-size:15px;"><preview-animation-1>Preview</preview-animation-1></font><br>
<font style="font-size:15px;"><a href = "img/animation-group1/ladder fall.zip" style="color:#4F81BD;">Downlad TPF file</a></font>
</div>
<div style="position:absolute;width:281px;text-align:center;margin-top:60px;margin-left:281px;">
<font style="font-size:17px;font-weight:bold;"><stickname>Walking</stickname></font><br>
<font style="font-size:13px;"><stickcreator>(Animation by: the creator)</stickcreator></font>
<img src = "img/animation-group1/walking-s.gif">
<font style="font-size:15px;"><preview-animation-2>Preview</preview-animation-2></font><br>
<font style="font-size:15px;"><a href = "img/animation-group1/walking.zip" style="color:#4F81BD;">Downlad TPF file</a></font>
</div>
<div style="position:absolute;width:281px;text-align:center;margin-top:60px;margin-left:562px;">
<font style="font-size:17px;font-weight:bold;"><stickname>Running</stickname></font><br>
<font style="font-size:13px;"><stickcreator>(Animation by: the creator)</stickcreator></font>
<img src = "img/animation-group1/running-s.gif">
<font style="font-size:15px;"><preview-animation-3>Preview</preview-animation-3></font><br>
<font style="font-size:15px;"><a href = "img/animation-group1/running.zip" style="color:#4F81BD;">Downlad TPF file</a></font>
</div>
<div style="position:absolute;width:281px;text-align:center;margin-top:365px;">
<font style="font-size:17px;font-weight:bold;"><stickname>Knockout</stickname></font><br>
<font style="font-size:13px;"><stickcreator>(Animation by: the creator)</stickcreator></font>
<img src = "img/animation-group1/knockout-s.gif">
<font style="font-size:15px;"><preview-animation-4>Preview</preview-animation-4></font><br>
<font style="font-size:15px;"><a href = "img/animation-group1/knockout.zip" style="color:#4F81BD;">Downlad TPF file</a></font>
</div>
<div style="position:absolute;width:281px;text-align:center;margin-top:365px;margin-left:281px;">
<font style="font-size:17px;font-weight:bold;"><stickname>Smoking</stickname></font><br>
<font style="font-size:13px;"><stickcreator>(Animation by: the creator)</stickcreator></font>
<img src = "img/animation-group1/smoking-s.gif">
<font style="font-size:15px;"><preview-animation-5>Preview</preview-animation-5></font><br>
<font style="font-size:15px;"><a href = "img/animation-group1/smoking.zip" style="color:#4F81BD;">Downlad TPF file</a></font>
</div>
<div style="position:absolute;width:281px;text-align:center;margin-top:365px;margin-left:562px;">
<font style="font-size:17px;font-weight:bold;"><stickname></stickname></font><br>
<font style="font-size:13px;"><stickcreator></stickcreator></font><br>
<img src = "img/blank.png">
<font style="font-size:15px;"><a href = "#" style="color:#4F81BD;"></a></font>
</div>
<div style="display:block;position:absolute;text-align:center;margin-top:675px;margin-left:0px;width:845px;">
<a href = "#" style="border:hidden;"><img src = "img/selector-active.png"></a>
</div>
<div class = "gif-player" style="display:block;position:absolute; width:845px;text-align:center;background-color:#FFF;height:715px;">
<close-button></close-button>
<img src = "#">
</div>
</div>
<div class = "footer">
Copyright © 2013-2014 Mikeytronix Softwares, All Rights Reserved.
<br>
Send all comments to <a href = "#">[email protected]</a>
</div>
</body>
</center>
</html>