-
Notifications
You must be signed in to change notification settings - Fork 0
/
stars-twilight.html
62 lines (62 loc) · 2.14 KB
/
stars-twilight.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
<!DOCTYPE html>
<html>
<head>
<style>
html, body, .void, .space {
margin: 0px;
padding: 0px;
background: linear-gradient(#000000, #0000AA);
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.star {
display: block;
position: absolute;
background-color: #FFFFFF;
border-radius: 100%;
}
</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(y) {
return getRandom(0, (window.innerHeight * 1.5) - y) / (window.innerHeight * 1);
}
function placeStar() {
var star = $("<div>", {"class": "star"});
var size = getRandom(1, 2);
var y = getRandomCoordY();
star.css("top", y);
star.css("left", getRandomCoordX());
star.css("background-color", "rgba(255, 255, 255, " + getRandomAlpha(y) + ")");
star.css("width", size);
star.css("height", size);
$(".space").append(star);
}
for(i = 0; i < (Math.max(window.innerWidth, window.innerHeight) - Math.min(window.innerWidth, window.innerHeight)) * 3; i++) {
placeStar();
}
</script>
</body>
</html>