this repo has no description
Display sun/moon/clouds/stars based on time of day and change the suns position
- no js: clouds
- between 6am and 6pm: sun and clouds
- before 6am or after 6pm: moon and stars
suns position is (time - 6) / 12, as it is assumed 6am is daytime and 6pm is nighttime
this is NOT accurate but its quick, simple, and you cant get the daytime anyway
todo: SVGs, sky colour
+58
+54
src/components/blog/Background.astro
+54
src/components/blog/Background.astro
···
24
24
animation-timeline: scroll();
25
25
}
26
26
}
27
+
28
+
/* time styling */
29
+
#background:not([data-time]) > :is(#stars, #sun, #moon) {
30
+
display: none;
31
+
}
32
+
33
+
#background[data-time="day"] {
34
+
#sun,
35
+
#clouds {
36
+
display: block;
37
+
}
38
+
39
+
#stars,
40
+
#moon {
41
+
display: none;
42
+
}
43
+
}
44
+
45
+
#background[data-time="night"] {
46
+
#stars,
47
+
#moon {
48
+
display: block;
49
+
}
50
+
51
+
#sun,
52
+
#clouds {
53
+
display: none;
54
+
}
55
+
}
27
56
</style>
57
+
58
+
<script>
59
+
// progressive enhancement
60
+
const refresh = () => {
61
+
const time = new Date();
62
+
const accurateTime =
63
+
time.getHours() + time.getMinutes() / 60 + time.getSeconds() / 60 ** 2;
64
+
65
+
const daytime = accurateTime > 6 && accurateTime < 18;
66
+
const bg = document.getElementById("background");
67
+
if (bg === null) throw new Error("no #background");
68
+
bg.dataset.time = daytime ? "day" : "night";
69
+
70
+
if (daytime) {
71
+
const percent = (accurateTime - 6) / 12;
72
+
const sun = document.getElementById("sun");
73
+
if (sun === null) throw new Error("no #sun");
74
+
sun.style.setProperty("--sun-progress-percent", percent + "");
75
+
}
76
+
77
+
setTimeout(refresh, 5 * 60 * 1000);
78
+
};
79
+
80
+
refresh();
81
+
</script>
28
82
29
83
<style>
30
84
#background {
+4
src/components/blog/background/Sun.astro
+4
src/components/blog/background/Sun.astro
···
9
9
top: 15rem;
10
10
left: 5rem;
11
11
z-index: -1;
12
+
13
+
transition: left 0.2s ease-in-out;
14
+
left: calc(100lvw * var(--sun-progress-percent) - 7.5rem);
12
15
}
13
16
</style>
14
17
15
18
<img
19
+
id="sun"
16
20
src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/BBSO_full-disk_H-alpha_2002-07-26_153931_color.png/250px-BBSO_full-disk_H-alpha_2002-07-26_153931_color.png"
17
21
alt=""
18
22
style={`--parallax-speed: ${blog.background.parallax.sun}`}