Skip to content

Commit cfa4ac0

Browse files
zaldihzaldih
committed
first commit
1 parent cf33f3a commit cfa4ac0

File tree

3 files changed

+231
-9
lines changed

3 files changed

+231
-9
lines changed

‎index.html

+32-9
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,35 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7-
<title>voidcosmos</title>
8-
</head>
9-
<body>
10-
<span style="color:purple">The beginning of everything</span>
11-
</body>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link href="https://fonts.googleapis.com/css?family=Lexend+Mega|Livvic&display=swap" rel="stylesheet" />
8+
<link rel="stylesheet" href="style.css" />
9+
<title>VoidCosmos</title>
10+
</head>
11+
<body>
12+
<header>
13+
<div class="header-brand">
14+
<h1 class="voidcosmos-title glow">Void Cosmos</h1>
15+
<p class="description">Two developer who do things.</p>
16+
</div>
17+
<nav class="horizontal-nav">
18+
<abbr title="Web under construction">
19+
<span class="btn" id="theTeamBtn">
20+
The Team
21+
</span>
22+
</abbr>
23+
</nav>
24+
</header>
25+
<div class="projects">
26+
<span>
27+
>
28+
<a href="https://github.com/voidcosmos/npkill" target="_blank"
29+
><img src="https://npkill.js.org/img/npkill-scope-mono.svg" width="15" /> NPKILL</a
30+
>
31+
</span>
32+
</div>
33+
</body>
34+
<script src="stars.js"></script>
1235
</html>

‎stars.js

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
(function() {
2+
let canvas;
3+
let ctx;
4+
5+
const layers = [[{ id: 0, x: 300, y: 700, size: 1 }]];
6+
let speed = 20;
7+
const finalSpeed = 0.2;
8+
9+
let isFinalSpeed = false;
10+
11+
initializeCanvas();
12+
populateStars();
13+
nextFrame();
14+
addListeners();
15+
16+
function initializeCanvas() {
17+
canvas = document.createElement('canvas');
18+
canvas.id = 'starsCanvas';
19+
canvas.style.zIndex = -50;
20+
canvas.style.position = 'fixed';
21+
canvas.style.opacity = '0.3';
22+
canvas.style.top = '0';
23+
canvas.style.left = '0';
24+
25+
ctx = canvas.getContext('2d');
26+
const body = document.getElementsByTagName('body')[0];
27+
body.appendChild(canvas);
28+
resizeCanvas();
29+
}
30+
31+
function resizeCanvas() {
32+
canvas.width = window.innerWidth;
33+
canvas.height = window.innerHeight;
34+
}
35+
36+
function addListeners() {
37+
window.addEventListener('resize', resizeCanvas);
38+
const teamBtn = document.getElementById('theTeamBtn');
39+
teamBtn.addEventListener('click', () => speedPulse());
40+
}
41+
42+
function speedPulse() {
43+
console.log('lala');
44+
speed = 20;
45+
}
46+
47+
function refresh() {
48+
clearCanvas();
49+
checkSpeed();
50+
layers.map(layer => {
51+
drawLayer(layer);
52+
calculatePositions(layer);
53+
});
54+
nextFrame();
55+
}
56+
57+
function checkSpeed() {
58+
if (speed > finalSpeed) {
59+
speed = speed * 0.97;
60+
isFinalSpeed = false;
61+
} else {
62+
speed = finalSpeed;
63+
isFinalSpeed = true;
64+
}
65+
}
66+
67+
function clearCanvas() {
68+
ctx.clearRect(0, 0, canvas.width, canvas.height);
69+
}
70+
71+
function drawLayer(layer) {
72+
ctx.fillStyle = 'white';
73+
layer.map(element => {
74+
ctx.fillRect(element.x, element.y, element.size, element.size);
75+
});
76+
}
77+
78+
function calculatePositions(layer) {
79+
layer.map(element => {
80+
element.y -= speed * element.size;
81+
if (element.y < 300) deleteElementFromLayer(layer, element);
82+
});
83+
}
84+
85+
function deleteElementFromLayer(layer, element) {
86+
layer = layer.filter(object => object.id !== element.id);
87+
}
88+
89+
function populateStars() {
90+
const starsAmount = isFinalSpeed ? 7 : 12;
91+
92+
const starSizes = [1, 1, 1, 2, 2, 3, 3, 4, 5, 6];
93+
94+
for (let i = 0; i < starsAmount; ++i) {
95+
let star = {};
96+
star.id = getRandomInt(0, 500000);
97+
star.size = starSizes[getRandomInt(0, starSizes.length)];
98+
star.x = getRandomInt(0, canvas.width);
99+
star.y = canvas.height;
100+
layers[0].push(star);
101+
}
102+
103+
setTimeout(() => populateStars(), getRandomInt(500, 2000) / (speed + 0.9));
104+
}
105+
106+
function nextFrame() {
107+
window.requestAnimationFrame(refresh);
108+
}
109+
110+
function getRandomInt(min, max) {
111+
return Math.floor(Math.random() * (max - min + 1)) + min;
112+
}
113+
})();

‎style.css

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
* {
2+
font-family: 'Livvic', sans-serif;
3+
}
4+
5+
html {
6+
height: 100vh;
7+
}
8+
9+
body {
10+
margin: 0;
11+
color: white;
12+
background: #0f111f;
13+
background: radial-gradient(ellipse at bottom, #18222e 0%, #0b0c13 100%);
14+
}
15+
16+
header {
17+
display: flex;
18+
align-items: center;
19+
}
20+
21+
.header-brand {
22+
margin: 40px 0 0 40px;
23+
display: inline-block;
24+
text-align: center;
25+
}
26+
27+
.voidcosmos-title {
28+
margin: 0;
29+
font-size: 3em;
30+
color: white;
31+
font-family: 'Lexend Mega', sans-serif;
32+
background: linear-gradient(to right, #f46e45 0%, #eea849 100%);
33+
/* background: linear-gradient(to right, rgb(6, 139, 221) 0%, #5d5ebd 100%); */
34+
-webkit-background-clip: text;
35+
-webkit-text-fill-color: transparent;
36+
}
37+
38+
.description {
39+
opacity: 0.4;
40+
}
41+
42+
.horizontal-nav {
43+
color: rgb(172, 172, 3);
44+
margin-left: 100px;
45+
}
46+
47+
.horizontal-nav span {
48+
padding: 5px;
49+
border: 1px solid rgb(87, 87, 87);
50+
border-radius: 5px;
51+
}
52+
53+
.projects {
54+
margin-left: 40px;
55+
margin-top: 40px;
56+
}
57+
58+
.btn {
59+
cursor: pointer;
60+
}
61+
62+
a {
63+
color: rgb(221, 101, 101);
64+
text-decoration: none;
65+
}
66+
67+
.glow {
68+
animation: glow 3s ease-in-out infinite alternate;
69+
}
70+
71+
@-webkit-keyframes glow {
72+
0% {
73+
text-shadow: 0 0 10px rgba(244,110,69, 0.4);
74+
}
75+
30% {
76+
text-shadow: 0 0 10px rgba(244,110,69, 0.4)
77+
}
78+
50% {
79+
text-shadow: 0 0 20px rgba(238,168,73, 0.4)
80+
}
81+
70% {
82+
text-shadow: 0 0 20px rgba(238,168,73, 0.4)
83+
}
84+
100% {
85+
text-shadow: 0 0 10px rgba(244,110,69, 0.4)
86+
}

0 commit comments

Comments
 (0)