From 8bab0de73845e9ff505c225ae4c110df5ba9a0f8 Mon Sep 17 00:00:00 2001
From: "Thomas A. Christensen II" <25492070+MillironX@users.noreply.github.com>
Date: Wed, 20 Nov 2024 11:46:24 -0600
Subject: [PATCH] feat: Add CSS-only scrolling image background

---
 assets/styles/millironx.css | 73 +++++++++++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)

diff --git a/assets/styles/millironx.css b/assets/styles/millironx.css
index cd9d974..3275b67 100644
--- a/assets/styles/millironx.css
+++ b/assets/styles/millironx.css
@@ -254,3 +254,76 @@ blockquote small {
     max-width: 50%;
   }
 } /* end @media */
+
+@supports (animation-timeline: scroll()) {
+  @keyframes sticky-header {
+    from {
+      height: 50vh;
+      top: 6rem;
+    }
+
+    to {
+      height: 10vh;
+      top: -1rem;
+    }
+  }
+
+  @keyframes blurry-header {
+    from {
+      filter: blur(0);
+    }
+
+    to {
+      filter: blur(2px);
+    }
+  }
+
+  @keyframes transparent-text-bg {
+    from {
+      background-color: rgba(0.33, 0.33, 0.33, 0.33);
+    }
+    to {
+      background-color: rgba(0.33, 0.33, 0.33, 0);
+    }
+  }
+
+  main {
+    position: relative;
+    top: 55vh;
+  }
+
+  .motto {
+    position: fixed;
+    top: 12rem;
+
+    animation: sticky-header linear forwards;
+    animation-timeline: scroll();
+    animation-range: 0.001vh 50vh;
+  }
+
+  .motto::before {
+    filter: blur(12px);
+
+    top: 2rem;
+
+    animation: blurry-header linear forwards;
+    animation-timeline: scroll();
+    animation-range: 0.001vh 50vh;
+  }
+
+  .motto-inside h1 {
+    animation: transparent-text-bg linear forwards;
+    animation-timeline: scroll();
+    animation-range: 0.001vh 40vh;
+  }
+
+  @media (min-width: 768px) {
+    .motto {
+      width: calc(100% - 8rem);
+    }
+
+    .motto::before {
+      top: 0;
+    }
+  }
+} /* end @supports */