-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgalaxy2.html
81 lines (81 loc) · 3.1 KB
/
galaxy2.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
<!DOCTYPE html>
<html>
<head>
<style>
html, body, .void, .space {
margin: 0px;
padding: 0px;
background-color: #000000;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.star {
display: block;
position: absolute;
background-color: #FFFFFF;
border-radius: 100%;
}
.quark {
display: block;
position: absolute;
border-radius: 100%;
margin: -500px;
}
</style>
</head>
<body>
<div class="void">
<div class="space">
<!-- Space stuff goes here -->
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous">
</script>
<script type="application/javascript">
function getRandom(min, max) {
return Math.random() * (max - min) + min;
}
function getRandomCoordX() {
return getRandom(0, window.innerWidth);
}
function getRandomCoordY() {
return getRandom(0, window.innerHeight);
}
function getRandomAlpha() {
return getRandom(0, 100) / 100;
}
function placeStar() {
var star = $("<div>", {"class": "star"});
var size = getRandom(1, 2);
star.css("top", getRandomCoordY());
star.css("left", getRandomCoordX());
star.css("background-color", "rgba(255, 255, 255, " + getRandomAlpha() + ")");
star.css("width", size);
star.css("height", size);
$(".space").append(star);
}
function placeQuark() {
var width = Math.min(window.innerWidth, window.innerHeight) / 2 * (Math.random() + 2);
var height = Math.min(window.innerWidth, window.innerHeight) / 2 * (Math.random() + 2);
var quark = $("<div>", {"class": ("quark")});
quark.css("background", "radial-gradient(rgba(" + getRandom(0, 255) + ", 0, " + getRandom(191, 255) + ", 0.1), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0))")
quark.css("top", getRandomCoordY());
quark.css("left", getRandomCoordX());
quark.css("width", width);
quark.css("height", height);
$(".space").append(quark);
}
for(i = 0; i < (Math.max(window.innerWidth, window.innerHeight) - Math.min(window.innerWidth, window.innerHeight)) / 30; i++) {
placeQuark();
}
for(i = 0; i < (Math.max(window.innerWidth, window.innerHeight) - Math.min(window.innerWidth, window.innerHeight)) * 5; i++) {
placeStar();
}
</script>
</body>
</html>