vielle.dev
[Archived] Archived WIP of vielle.dev
Move cloud into own component and make scale controlled by config
+42
-20
+12
-20
src/components/blog/Background.astro
+12
-20
src/components/blog/Background.astro
···
1
1
---
2
-
import { blog } from "@/config";
2
+
import Cloud from "./background/Cloud.astro";
3
3
---
4
4
5
-
<style>
5
+
<style is:inline>
6
6
@keyframes scroll {
7
7
from {
8
8
translate: 0 0;
···
13
13
}
14
14
}
15
15
16
+
#background > * {
17
+
animation-name: scroll;
18
+
animation-duration: 1ms;
19
+
animation-direction: alternate;
20
+
animation-timeline: scroll();
21
+
}
22
+
</style>
23
+
24
+
<style>
16
25
#background {
17
26
background: dodgerblue;
18
27
width: 100lvw;
···
22
31
left: 0;
23
32
z-index: -1;
24
33
overflow: clip;
25
-
26
-
& > * {
27
-
animation-name: scroll;
28
-
animation-duration: 1ms;
29
-
animation-direction: alternate;
30
-
animation-timeline: scroll();
31
-
}
32
-
}
33
-
34
-
img {
35
-
position: relative;
36
-
top: 20rem;
37
-
height: 25lvh;
38
34
}
39
35
</style>
40
36
41
37
<div id="background">
42
-
<img
43
-
src="https://cdn.zmescience.com/wp-content/uploads/2017/07/8690313402_5f76f736b3_k-1-1024x683.webp"
44
-
alt=""
45
-
style={`--parallax-speed: ${blog.background.parallax.clouds}`}
46
-
/>
38
+
<Cloud />
47
39
</div>
+25
src/components/blog/background/Cloud.astro
+25
src/components/blog/background/Cloud.astro
···
1
+
---
2
+
import { blog } from "@/config";
3
+
4
+
const { width, height, count } = blog.background.clouds;
5
+
---
6
+
7
+
<style>
8
+
img {
9
+
position: absolute;
10
+
top: 20rem;
11
+
}
12
+
</style>
13
+
14
+
{
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};
20
+
21
+
width: ${width[0] + (width[1] - width[0]) * Math.random()}rem;
22
+
height: ${height[0] + (height[1] - height[0]) * Math.random()}rem;`}
23
+
/>
24
+
))
25
+
}