vielle.dev
[Archived] Archived WIP of vielle.dev
Make cloud/star components plural named & wrap in divs with IDs
Also make stars go behind the moon
+88
-83
+4
-4
src/components/blog/Background.astro
+4
-4
src/components/blog/Background.astro
···
1
1
---
2
-
import Cloud from "./background/Cloud.astro";
2
+
import Clouds from "./background/Clouds.astro";
3
+
import Stars from "./background/Stars.astro";
3
4
import Moon from "./background/Moon.astro";
4
-
import Star from "./background/Star.astro";
5
5
import Sun from "./background/Sun.astro";
6
6
---
7
7
···
40
40
</style>
41
41
42
42
<div id="background">
43
-
<Cloud />
43
+
<Clouds />
44
+
<Stars />
44
45
<Sun />
45
46
<Moon />
46
-
<Star />
47
47
</div>
-52
src/components/blog/background/Cloud.astro
-52
src/components/blog/background/Cloud.astro
···
1
-
---
2
-
import { blog } from "@/config";
3
-
---
4
-
5
-
<style>
6
-
img {
7
-
position: absolute;
8
-
}
9
-
</style>
10
-
11
-
{
12
-
new Array(blog.background.clouds.count).fill(0).reduce(
13
-
(prev) => {
14
-
const width =
15
-
blog.background.clouds.width[0] +
16
-
(blog.background.clouds.width[1] - blog.background.clouds.width[0]) *
17
-
Math.random(),
18
-
height =
19
-
blog.background.clouds.height[0] +
20
-
(blog.background.clouds.height[1] -
21
-
blog.background.clouds.height[0]) *
22
-
Math.random(),
23
-
x = Math.random(),
24
-
y =
25
-
prev.y +
26
-
blog.background.clouds.yGap[0] +
27
-
Math.random() *
28
-
(blog.background.clouds.yGap[1] - blog.background.clouds.yGap[0]);
29
-
30
-
return {
31
-
y: y,
32
-
output: [
33
-
...prev.output,
34
-
<img
35
-
src="https://cdn.zmescience.com/wp-content/uploads/2017/07/8690313402_5f76f736b3_k-1-1024x683.webp"
36
-
alt=""
37
-
style={`--parallax-speed: ${blog.background.parallax.clouds};
38
-
39
-
width: ${width}rem;
40
-
height: ${height}rem;
41
-
top: ${y}rem;
42
-
left: calc(${x} * 200lvw - 100lvw);`}
43
-
/>,
44
-
],
45
-
};
46
-
},
47
-
{
48
-
y: 0,
49
-
output: [],
50
-
}
51
-
).output
52
-
}
+55
src/components/blog/background/Clouds.astro
+55
src/components/blog/background/Clouds.astro
···
1
+
---
2
+
import { blog } from "@/config";
3
+
---
4
+
5
+
<style>
6
+
img {
7
+
position: absolute;
8
+
}
9
+
</style>
10
+
11
+
<div id="clouds">
12
+
{
13
+
new Array(blog.background.clouds.count).fill(0).reduce(
14
+
(prev) => {
15
+
const width =
16
+
blog.background.clouds.width[0] +
17
+
(blog.background.clouds.width[1] -
18
+
blog.background.clouds.width[0]) *
19
+
Math.random(),
20
+
height =
21
+
blog.background.clouds.height[0] +
22
+
(blog.background.clouds.height[1] -
23
+
blog.background.clouds.height[0]) *
24
+
Math.random(),
25
+
x = Math.random(),
26
+
y =
27
+
prev.y +
28
+
blog.background.clouds.yGap[0] +
29
+
Math.random() *
30
+
(blog.background.clouds.yGap[1] - blog.background.clouds.yGap[0]);
31
+
32
+
return {
33
+
y: y,
34
+
output: [
35
+
...prev.output,
36
+
<img
37
+
src="https://cdn.zmescience.com/wp-content/uploads/2017/07/8690313402_5f76f736b3_k-1-1024x683.webp"
38
+
alt=""
39
+
style={`--parallax-speed: ${blog.background.parallax.clouds};
40
+
41
+
width: ${width}rem;
42
+
height: ${height}rem;
43
+
top: ${y}rem;
44
+
left: calc(${x} * 200lvw - 100lvw);`}
45
+
/>,
46
+
],
47
+
};
48
+
},
49
+
{
50
+
y: 0,
51
+
output: [],
52
+
}
53
+
).output
54
+
}
55
+
</div>
-1
src/components/blog/background/Moon.astro
-1
src/components/blog/background/Moon.astro
-26
src/components/blog/background/Star.astro
-26
src/components/blog/background/Star.astro
···
1
-
---
2
-
import { blog } from "@/config";
3
-
---
4
-
5
-
<style>
6
-
img {
7
-
position: absolute;
8
-
width: var(--size);
9
-
height: var(--size);
10
-
top: calc(var(--y) * (120lvh + var(--parallax-speed) * 1lvh) - 10lvh);
11
-
left: calc(var(--x) * 120lvw - 10lvw);
12
-
}
13
-
</style>
14
-
15
-
{
16
-
new Array(blog.background.stars.count).fill(0).map((_) => (
17
-
<img
18
-
src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.istockphoto.com%2Fphotos%2Fgolden-star-picture-id498723198%3Fk%3D6%26m%3D498723198%26s%3D612x612%26w%3D0%26h%3DrIeSl8WZdo6qWBvw_vgWc3vPhrBj39jCyeiZKltHIWk%3D&f=1&nofb=1&ipt=d84206dedd597d64591aa883e18799f72d5863f495a9ce7b22c0e1814215263b"
19
-
alt=""
20
-
style={`--parallax-speed: ${blog.background.parallax.star};
21
-
--size: ${blog.background.stars.size[0] + Math.random() * (blog.background.stars.size[1] - blog.background.stars.size[0])}rem;
22
-
--x: ${Math.random()};
23
-
--y: ${Math.random()}`}
24
-
/>
25
-
))
26
-
}
+29
src/components/blog/background/Stars.astro
+29
src/components/blog/background/Stars.astro
···
1
+
---
2
+
import { blog } from "@/config";
3
+
---
4
+
5
+
<style>
6
+
img {
7
+
position: absolute;
8
+
width: var(--size);
9
+
height: var(--size);
10
+
top: calc(var(--y) * (120lvh + var(--parallax-speed) * 1lvh) - 10lvh);
11
+
left: calc(var(--x) * 120lvw - 10lvw);
12
+
z-index: -1;
13
+
}
14
+
</style>
15
+
16
+
<div id="stars">
17
+
{
18
+
new Array(blog.background.stars.count).fill(0).map((_) => (
19
+
<img
20
+
src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fmedia.istockphoto.com%2Fphotos%2Fgolden-star-picture-id498723198%3Fk%3D6%26m%3D498723198%26s%3D612x612%26w%3D0%26h%3DrIeSl8WZdo6qWBvw_vgWc3vPhrBj39jCyeiZKltHIWk%3D&f=1&nofb=1&ipt=d84206dedd597d64591aa883e18799f72d5863f495a9ce7b22c0e1814215263b"
21
+
alt=""
22
+
style={`--parallax-speed: ${blog.background.parallax.star};
23
+
--size: ${blog.background.stars.size[0] + Math.random() * (blog.background.stars.size[1] - blog.background.stars.size[0])}rem;
24
+
--x: ${Math.random()};
25
+
--y: ${Math.random()}`}
26
+
/>
27
+
))
28
+
}
29
+
</div>