this repo has no description
Make stars have randomised prongs and rotate
+56
-11
+3
-3
src/components/blog/Background.astro
+3
-3
src/components/blog/Background.astro
···
21
21
}
22
22
}
23
23
24
-
#background *[data-parallax] {
25
-
@media (prefers-reduced-motion: no-preference) {
26
-
animation: scroll, 1ms, alternate;
24
+
@media (prefers-reduced-motion: no-preference) {
25
+
[data-parallax] {
26
+
animation: 1ms alternate scroll;
27
27
animation-timeline: scroll();
28
28
}
29
29
}
+42
-8
src/components/blog/background/Stars.astro
+42
-8
src/components/blog/background/Stars.astro
···
1
1
---
2
-
import { blog } from "@/config";
2
+
import { blog, utils } from "@/config";
3
3
---
4
4
5
5
<style>
6
-
img {
6
+
@keyframes spin {
7
+
from {
8
+
rotate: 0deg;
9
+
}
10
+
to {
11
+
rotate: 360deg;
12
+
}
13
+
}
14
+
15
+
svg {
7
16
position: absolute;
8
17
width: var(--size);
9
18
height: var(--size);
10
19
top: calc(var(--y) * (120lvh + var(--parallax-speed) * 1lvh) - 10lvh);
11
20
left: calc(var(--x) * 120lvw - 10lvw);
12
21
z-index: -1;
22
+
animation-name: spin var(--rotate-speed) forwards infinite;
23
+
24
+
&[data-parallax] {
25
+
animation:
26
+
1ms alternate scroll,
27
+
var(--rotate-dir) var(--rotate-speed) infinite linear spin !important;
28
+
animation-timeline: scroll(), auto !important;
29
+
}
13
30
}
14
31
</style>
15
32
···
17
34
{
18
35
new Array(blog.background.stars.count).fill(0).map((_) => {
19
36
const sizeSeed = Math.random();
37
+
const prongs = Math.round(
38
+
blog.background.stars.prongs[0] +
39
+
Math.random() *
40
+
(blog.background.stars.prongs[1] - blog.background.stars.prongs[0])
41
+
);
20
42
21
43
return (
22
-
<img
23
-
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"
24
-
alt=""
25
-
style={`--parallax-speed: ${blog.background.parallax.star[0] + sizeSeed * (blog.background.parallax.star[1] - blog.background.parallax.star[0])};
44
+
<svg
45
+
style={`--parallax-speed: ${utils.getRandom(blog.background.parallax.star, sizeSeed)};
26
46
--size: ${blog.background.stars.size[0] + sizeSeed * (blog.background.stars.size[1] - blog.background.stars.size[0])}rem;
27
47
--x: ${Math.random()};
28
-
--y: ${Math.random()}`}
48
+
--y: ${Math.random()};
49
+
--rotate-speed: ${blog.background.stars.rotateSpeed[0] + Math.random() * (blog.background.stars.rotateSpeed[1] - blog.background.stars.rotateSpeed[0])}s;
50
+
--rotate-dir: ${Math.random() < 0.5 ? "normal" : "reverse"}`}
29
51
data-parallax
30
-
/>
52
+
version="1.1"
53
+
xmlns="http://www.w3.org/2000/svg"
54
+
viewBox="0 0 100 100"
55
+
>
56
+
{new Array(prongs).fill(0).map((_, i) => (
57
+
<polygon
58
+
fill="#ffffff"
59
+
points="50 0, 75 50, 25 50"
60
+
transform={`rotate(${(i / prongs) * 360})`}
61
+
transform-origin="center"
62
+
/>
63
+
))}
64
+
</svg>
31
65
);
32
66
})
33
67
}
+11
src/config.ts
+11
src/config.ts
···
24
24
stars: {
25
25
count: 40,
26
26
size: [2, 5],
27
+
prongs: [4, 8],
28
+
rotateSpeed: [20, 40],
27
29
},
30
+
},
31
+
} as const;
32
+
33
+
export const utils = {
34
+
getRandom(
35
+
variance: [number, number] | readonly [number, number],
36
+
seed?: number
37
+
) {
38
+
return variance[0] + (seed ?? Math.random()) * variance[1] - variance[0];
28
39
},
29
40
};