html
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
<!-- UPDATES V1.6
* Colorblind friendly design
* Shapes changed
* Change of the movement
-->
<!DOCTYPE html>
<html>
<head>
<title>Gami's Animation</title>
<link href="https://fonts.googleapis.com/css?family=PT+Sans|Raleway" rel="stylesheet"> </head>
<body>
<div>
<div class="header">
<h1>Welcome to <strong>Gami</strong>'s First Animation</h1>
<h6>This is my first animation in JS. Enjoy!</h6>
</div>
<nav>
<h2>What could I add to it?</h2>
</nav>
<div class= "game">
<div id ="animatie">
<div id="box"></div>
<div id="box2"></div>
</div>
<button id="button1" onclick = "start()">Start</button>
<button id="button2" onclick = "stop()">Stop</button>
</div>
Enter to Rename, Shift+Enter to Preview
css
css
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
body {
display: inline;
z-index: 1;
background: -moz-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(248,80,50,1)), color-stop(50%, rgba(241,111,92,1)), color-stop(51%, rgba(246,41,12,1)), color-stop(71%, rgba(240,47,23,1)), color-stop(100%, rgba(231,56,39,1)));
background: -webkit-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
background: -o-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
background: -ms-linear-gradient(left, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
background: linear-gradient(to right, rgba(248,80,50,1) 0%, rgba(241,111,92,1) 50%, rgba(246,41,12,1) 51%, rgba(240,47,23,1) 71%, rgba(231,56,39,1) 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=1 );
}
marquee {
font-family: "Raleway", sans-serif;
font-weight: bold;
font-size: 40px;
text-shadow: rgba(0,0,255,1) -1px -2px 0.5em;
}
.header {
text-align: center;
margin: auto;
font-family: 'Raleway', sans-serif;
width:350px;
top:0px;
background:#F0F0F0;
font-size: 36px;
Enter to Rename, Shift+Enter to Preview
js
js
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
window.onload = function() {
var pos = 0;
var new_pos = 0;
var b1 = document.getElementById("box");
var b2 = document.getElementById("box2");
var x = document.getElementById("button1");
var y = document.getElementById("button2");
x.onclick = function start() {
var t = setInterval(move, 10);
function move() {
if(pos >= 150) {
pos = 0;
new_pos += 50;
if (new_pos >= 150) {
new_pos = 0;
}
}
else {
pos += 1;
new_pos -= 0.01;
b1.style.left = pos+'px';
b1.style.top = new_pos+'px';
b2.style.right = pos+'px';
b2.style.bottom = new_pos+'px';
}
y.onclick = function stop() {
clearInterval(t);
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run