Brought back parallax using only CSS

TODO.md

@@ -33,7 +33,6 @@
 - [Feat] [Payload] Endpoints should provide a simple text-based version of the content (for OG purposes)
 - [Feat] [WebManifest] Add shortcuts https://web.dev/patterns/web-apps/shortcuts
 - [Feat] [PWA] Rich install UI https://web.dev/patterns/web-apps/richer-install-ui/
-- [Feat] Try using CSS instead of JS for parallax effect
 - [Feat] More data caching between the CMS and Astro
 - [Feat] [Folders] Support for nameless section
 - [Feat] [Scripts] Can't run the scripts using node (ts-node?)

src/components/AppLayout/components/AppLayoutBackgroundImg.astro

@@ -20,19 +20,20 @@ const uniqueId = getRandomId();
 
 {/* ------------------------------------------- HTML ------------------------------------------- */}
 
-<img
-  id={uniqueId}
-  src={url}
-  srcset={sizesToSrcset(sizes)}
-  sizes="100vw"
-  width={width}
-  height={height}
-  loading="lazy"
-  class="when-no-print"
-  decoding="async"
-  alt=""
-  inert
-/>
+<div inert>
+  <img
+    id={uniqueId}
+    src={url}
+    srcset={sizesToSrcset(sizes)}
+    sizes="100vw"
+    width={width}
+    height={height}
+    loading="lazy"
+    class="when-no-print"
+    decoding="async"
+    alt=""
+  />
+</div>
 
 {/* ------------------------------------------- CSS -------------------------------------------- */}
 
@@ -46,42 +47,59 @@ const uniqueId = getRandomId();
     }
   }
 
-  img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: -9999;
+  @keyframes parallax {
+    from {
+      transform: translateY(0);
+    }
 
+    to {
+      transform: translateY(calc((100cqb - 100lvh) * var(--parallax-amount)));
+    }
+  }
+
+  div {
+    container-type: size;
+    position: absolute;
+    inset: 0;
+    z-index: -9999;
+    overflow: hidden;
+
+    animation: fadeIn 3s forwards;
+  }
+
+  img {
     width: 100%;
     max-height: 100%;
+    min-height: 100lvh;
 
     object-fit: cover;
     object-position: 50% 0;
 
-    animation: fadeIn 3s forwards;
-
-    @media (max-width: 650.5px) {
-      display: none;
-    }
-
     mask-image: linear-gradient(to bottom, rgba(0 0 0 / 100%) min(50vh, 50%), transparent),
-      linear-gradient(to right, rgba(0 0 0 / 10%), rgba(0 0 0 / 20%) 640px, black 1200px);
+      linear-gradient(to right, rgba(0 0 0 / 20%) 640px, black 1200px);
     mask-composite: intersect;
+
+    @supports (animation-timeline: scroll(root)) {
+      --parallax-amount: 0.4;
+      animation-name: parallax;
+      animation-timing-function: linear;
+      animation-timeline: scroll(root);
+    }
   }
 </style>
 
 {/* ------------------------------------------- JS --------------------------------------------- */}
 
 <script define:vars={{ uniqueId }} is:inline>
-  const element = document.getElementById(uniqueId);
-  element.style.animationPlayState = "paused";
+  const img = document.getElementById(uniqueId);
+  const parent = img.parentElement;
+  if (!parent || !img) return;
 
-  element.addEventListener(
+  parent.style.animationPlayState = "paused";
+  img.addEventListener(
     "load",
     () => {
-      element.style.animationPlayState = "running";
+      parent.style.animationPlayState = "running";
     },
     { once: true, passive: true }
   );

src/components/AppLayout/components/Html.astro

@@ -605,8 +605,9 @@ const { currentTheme } = Astro.locals;
       text-decoration: underline dotted 0.1em var(--color-base-650);
 
       border-radius: 9999px;
-      
-      &:hover, &:focus-visible {
+
+      &:hover,
+      &:focus-visible {
         color: var(--color-base-850);
         text-decoration-color: var(--color-base-750);
         outline: 3px solid var(--color-base-750);
@@ -635,7 +636,8 @@ const { currentTheme } = Astro.locals;
     cursor: pointer;
     border-radius: 9999px;
 
-    &:hover, &:focus-visible {
+    &:hover,
+    &:focus-visible {
       color: var(--color-base-700);
       outline-color: var(--color-base-700);
       outline-offset: 4px;
@@ -654,7 +656,7 @@ const { currentTheme } = Astro.locals;
     transition-property: text-decoration-color, color;
 
     border-radius: 9999px;
-    
+
     &:hover {
       color: var(--color-base-750);
       text-decoration-color: var(--color-base-650);

src/components/Button.astro

@@ -59,7 +59,8 @@ const { title, icon, class: className, ariaLabel, id } = Astro.props;
       height: 1.5em;
     }
 
-    &:hover, &:focus-visible {
+    &:hover,
+    &:focus-visible {
       box-shadow: inset 0 0.1em 0.1em 0 var(--color-shadow-2);
       translate: unset;
     }

src/components/Previews/GenericPreview.astro

@@ -146,7 +146,8 @@ for (const attribute of attributes) {
     position: relative;
     width: unset;
 
-    &a:hover > #footer > p, &a:focus-visible #footer > p {
+    &a:hover > #footer > p,
+    &a:focus-visible #footer > p {
       color: var(--color-base-750);
     }
 

src/pages/[locale]/collectibles/[slug]/_components/AvailabilityInfo.astro

@@ -75,7 +75,8 @@ const title = (() => {
         transition-duration: 150ms;
         transition-property: border-color, color;
 
-        &:hover, &:focus-visible {
+        &:hover,
+        &:focus-visible {
           color: var(--color-base-750);
           border-color: var(--color-base-750);
         }

src/pages/[locale]/collectibles/[slug]/_components/ContentsSection/ContentRow.astro

@@ -149,7 +149,8 @@ const { title, language } = (() => {
       text-decoration-color: transparent;
     }
 
-    &a:hover > #title, &a:focus-visible > #title {
+    &a:hover > #title,
+    &a:focus-visible > #title {
       color: var(--color-base-750);
       text-decoration-color: var(--color-base-650);
     }