html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- Created by 🍇 Alex Tușinean 💜 -->
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div id = "circle">
<div id = "astronaut">
<div class = "button" id = "about">About</div>
</div>
<div id = "sattelite">
<div class = "button" id = "projects">Projects</div>
</div>
</div>
<div class = "buttons" id = "left_button"> < </div>
<div class = "buttons" id = "right_button"> > </div>
<img src = "https://imgur.com/ZtVo9SJ.jpg" id = "planet"></img>
</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 🍇 Alex Tușinean 💜 */
body{
position:relative;
width:100vw; height:auto;
background:black;
margin:0; padding:0;
}
#circle{
position:fixed;
left:50%; top:0;
transform:translate(-50%);
width:200vh; height:200vh;
border-radius:50%;
transition:transform 0.04s;
color:white;
background:black;
transition-timing-function:linear;
}
#planet{
position:fixed;
left:0; bottom:0;
width:100%; height:auto; max-height:500px;
z-index:2;
pointer-events:none;
}
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
// Created by 🍇 Alex Tușinean 💜
const $ = (id) => document.getElementById(id);
var position = 0;
const rotate_the_circle = (side) => {
position += side;
$("circle").style.transform = `translate(-50%) rotate(${position}deg)`;
}
const am = () => {autoMove = setInterval(f,250); }
//Added fallback for events
var upEvent, downEvent;
if(window.TouchEvent) {
// Touch Events Supported
downEvent = "touchstart";
upEvent = "touchend";
}
else{
//mouse is here
downEvent = "mousedown";
upEvent = "mouseup"
}
//Function for auto movement of the stars.
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run