this repo has no description
Add parallax to background elements
- configure with blog.background.parallax.<element>
- test image is just off google if the link broke it dont matter
+35
-2
+30
-2
src/components/blog/Background.astro
+30
-2
src/components/blog/Background.astro
···
1
1
---
2
-
2
+
import { blog } from "@/config";
3
3
---
4
4
5
5
<style>
6
+
@keyframes scroll {
7
+
from {
8
+
translate: 0 0;
9
+
}
10
+
11
+
to {
12
+
translate: 0 calc(var(--parallax-speed, 70) * -1lvh);
13
+
}
14
+
}
15
+
6
16
#background {
7
-
background-image: linear-gradient(dodgerblue, lightblue);
17
+
background: dodgerblue;
8
18
width: 100lvw;
9
19
height: 100lvh;
10
20
position: fixed;
···
12
22
left: 0;
13
23
z-index: -1;
14
24
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;
15
38
}
16
39
</style>
17
40
18
41
<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
+
/>
19
47
</div>