-
Notifications
You must be signed in to change notification settings - Fork 6
Expand file tree
/
Copy pathindex.html
More file actions
171 lines (169 loc) · 6.6 KB
/
index.html
File metadata and controls
171 lines (169 loc) · 6.6 KB
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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html>
<head>
<!-- TODO: Change the title of the page to your demo name -->
<title>Animations Demo | Bit by Bit</title>
<link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="https://bitbybitcoding.org/imgs/favicon.svg">
<link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/7f9874946f.js" crossorigin="anonymous"></script>
</head>
<body>
<div id="header" class="flex-container-header">
<div class="flex-item-header flex-container-left">
<div class="flex-item-left">
<a href="/" style="margin-right: 1em;">
<button id="back-button" title="Back to all demos">
<i class="fas fa-arrow-left"></i>
</button>
</a>
</div>
<!-- TODO: Change the name of the demo here -->
<h1 class="flex-item-left">ANIMATIONS DEMO</h1>
</div>
<div class="flex-item-header">
<img id="bxb-logo" src="https://bitbybitcoding.org/imgs/Logo.svg" alt="Logo">
</div>
</div>
<div class="content">
<!-- TODO: Fill this content div with all the content of the demo -->
<div class="section">
<h3>Introduction</h3>
<p>
Animations are used in many T.V. shows and cartoons, and they can also be programmed in JavaScript. All you have to do is write a function, to perform a movement or change in color/shape
and call that function with an object.<br><br>
You can use animations to perform any of these:
<ul>
<li>Changing the color over a period of time.</li>
<li>Changing the position of an object.</li>
<li>Merging or seperating two objects.</li>
</ul>
</p>
</div>
<div class="section">
<h3>Properties</h3>
<p>
There are many different <span class="bold">properties</span> of animations that could be applied. The table below shows the name and purpose of a few of these properties.
</p>
<table>
<tr>
<th class="bold">Property</th>
<th class="bold">Description</th>
</tr>
<tr>
<th>@keyframes</th>
<th>Signifies the animation code</th>
</tr>
<tr>
<th>animation</th>
<th>Sets all animation properties to default</th>
</tr>
<tr>
<th>animation-delay</th>
<th>Sets delay for animation</th>
</tr>
<tr>
<th>animation-direction</th>
<th>Sets the cycle in which the animation should run</th>
</tr>
<tr>
<th>animation-duration</th>
<th>Sets the time-period for one animation cycle</th>
</tr>
<tr>
<th>animation-fill-mode</th>
<th>Sets style for animation while not running</th>
</tr>
<tr>
<th>animation-iteration-count</th>
<th>Specifies the number of times the animation should run</th>
</tr>
<tr>
<th>animation-name</th>
<th>Sets the name of the @keyframes animation</th>
</tr>
<tr>
<th>animation-play-state</th>
<th>Sets the current status of animation (playing, paused)</th>
</tr>
<tr>
<th>animation-timing-function</th>
<th>Specifies the speed of the animation</th>
</tr>
</table>
</div>
<div class="flex-box">
<div class="flex-col section">
<p>
<h2>Example 1</h2>
Press the button below and watch the BxB bot move from one side to the other. The button is linked to a function that animates the bot to move from one side to the other.
<br><br>
<button onclick="e1Example()">Animate!</button><br><br>
<img src="../assets/bit-by-bot-images/waving-happy-bot.svg" id="e1Bot" alt="BxB Bot">
</div>
<div class="flex-col section">
<p class="code">
<span class="comment">//This is the css declaration for the image of the bot. This is applied via Javascript when the button is pressed.</span><br>
#animatedBot { <br>
 width: 20%; <br>
 height: 20%; <br>
 position: relative;
 -webkit-animation:move 2.5s ease-in-out; <br>
} <br>
<br>
<span class="comment">//This is the actual animation of the bot</span> <br>
@-webkit-keyframes move { <br>
 from {<br>
  left: 0px; <br>
  top: 0px; <br>
 }
<br>
 to {<br>
  left: 300px; <br>
  top: 0px; <br>
 } <br> <br>
<span style="color:black; font-size:smaller;">*Simplified version of code</span>
</p>
</div>
</div>
<br>
<div class="flex-box">
<div class="flex-col section">
<p>
<h2>Example 2</h2>
Press the button below to watch the BxB bot appear and disappear. Animations can be also set with a <span class="bold">delay</span>, which makes them appear after a period of time.
<br><br>
<button onclick="e2Example()">Animate!</button><br><br>
Delay: <span id="e1SliderAmount"></span><input type="range" min="0.1" step="0.1" max = "10" value = "1" class="slider" id ="e2DelayValue"><br><br>
<img src="../assets/bit-by-bot-images/waving-happy-bot.svg" id="e2Bot" alt="BxB Bot">
</div>
<div class="flex-col section">
<p class="code">
<span class="comment">//This is the css declaration for the image of the bot. This is applied via Javascript when the button is pressed.</span><br>
#animatedBot { <br>
 width: 20%; <br>
 height: 20%; <br>
 position: relative; <br>
 -webkit-animation:appear 2.5 ease-in-out; <br>
 animation-delay: <span class="comment">(delay set by Javascript)</span><br>
} <br>
<br>
<span class="comment">//This is the actual animation of the bot</span> <br>
@-webkit-keyframes appear { <br>
 from {<br>
  opacity: 0; <br>
 }
<br><br>
 to {<br>
  opacity: 1;<br>
 } <br> <br>
<span style="color:black; font-size:smaller;">*Simplified version of code</span>
</p>
</div>
</div>
<!-- The end of the content div is here -->
</div>
<script src="script.js"></script>
</body>
</html>