vielle.dev
[Archived] Archived WIP of vielle.dev
Scatter clouds in the sky
+39
-12
src/components/blog/background/Cloud.astro
+39
-12
src/components/blog/background/Cloud.astro
···
1
1
---
2
2
import { blog } from "@/config";
3
-
4
-
const { width, height, count } = blog.background.clouds;
5
3
---
6
4
7
5
<style>
8
6
img {
9
7
position: absolute;
10
-
top: 20rem;
11
8
}
12
9
</style>
13
10
14
11
{
15
-
new Array(count).fill(0).map((_) => (
16
-
<img
17
-
src="https://cdn.zmescience.com/wp-content/uploads/2017/07/8690313402_5f76f736b3_k-1-1024x683.webp"
18
-
alt=""
19
-
style={`--parallax-speed: ${blog.background.parallax.clouds};
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};
20
38
21
-
width: ${width[0] + (width[1] - width[0]) * Math.random()}rem;
22
-
height: ${height[0] + (height[1] - height[0]) * Math.random()}rem;`}
23
-
/>
24
-
))
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
25
52
}