feat: fade in lazy loaded images

2023-11-20 16:16:23 +01:00
parent c7914b3d30
commit cac3856de4
3 changed files with 33 additions and 9 deletions
--- a/src/routes/global.css
+++ b/src/routes/global.css
@ -9,14 +9,23 @@
 }

 html, body {
-		height: 100%;
-		margin: 0;
-		padding: 0;
-		background-size: 80%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  background-size: 80%;
 }

-	html {
-		background: black;
-		background-image: url(/pattern_b.jpg);
-    backdrop-filter: brightness(0.3);
-	}
+html {
+  background: black;
+  background-image: url(/pattern_b.jpg);
+  backdrop-filter: brightness(0.3);
+}
+
+img.lazy-image {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+img.lazy-image.loaded {
+  opacity: 1;
+}