html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- Created by P... -->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body style="background-color:black">
<div id="container">
<div id="box"> </div>
<div id="box1"> </div>
<div id="box2"> </div>
<div id="box3"> </div>
<div id="box4"> </div>
<div id="box5"> </div>
<div id="box6"> </div>
<div id="box7"> </div>
</div>
</body>
</html>
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
/* Created by P... */
#container {
width: 1000px;
height: 1000px;
background: black;
position: relative;
}
#box {
width: 50px;
height: 50px;
background: red;
position: absolute;
margin-right:5px;
border-radius:50%;
}
#box1 {
width: 50px;
height: 50px;
background: green;
position: absolute;
margin-left:50px;
margin-top:51px;
border-radius:50%;
}#box2 {
width: 50px;
height: 50px;
background: red;
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
// Created by P...
//calling the function in window.onload to make sure the HTML is loaded
window.onload = function() {
var pos = 0;
var dir = 1;
//our box element
var container = document.getElementById('container');
var t = setInterval(move, 5);
function move() {
if(Math.abs(pos) >= 300) {
// clearInterval(t);
dir = -dir;
}
pos += dir;
container.style.top = pos+'px';
}
};
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run