handle reduced motion

karsonkalt · Oct 2, 2024 · 30145bd · 30145bd
1 parent 7742860
commit 30145bd
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 20 deletions.
diff --git a/_sass/custom-styles.scss b/_sass/custom-styles.scss
@@ -951,6 +951,12 @@ article {
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .wrapper:before {
+    animation: none;
+  }
+}
+
 @keyframes fadeInAndDown {
   0% {
     opacity: 0.5;

diff --git a/assets/js/home.js b/assets/js/home.js
diff --git a/assets/js/index.js b/assets/js/index.js
diff --git a/assets/ts/index.ts b/assets/ts/index.ts
@@ -27,21 +27,27 @@ http://linkedin.com/in/kaltkarson
 
 insertThemeButton();
 
-document.addEventListener("scroll", () => {
-  const wrapper = document.querySelector(".wrapper") as HTMLElement;
-  const scrollTop = window.scrollY || document.documentElement.scrollTop;
-  const scrollHeight =
-    document.documentElement.scrollHeight - window.innerHeight;
-  const scrollPercent = scrollTop / scrollHeight;
-
-  const vh = Math.max(
-    document.documentElement.clientHeight || 0,
-    window.innerHeight || 0
-  );
-
-  const vh50 = vh * 0.5;
-
-  const offset = scrollPercent * -vh50;
-
-  wrapper?.style.setProperty("--gradient-top-offset", `${offset}px`);
-});
+const prefersReducedMotion = window.matchMedia(
+  "(prefers-reduced-motion: reduce)"
+).matches;
+
+if (!prefersReducedMotion) {
+  document.addEventListener("scroll", () => {
+    const wrapper = document.querySelector(".wrapper") as HTMLElement;
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    const scrollHeight =
+      document.documentElement.scrollHeight - window.innerHeight;
+    const scrollPercent = scrollTop / scrollHeight;
+
+    const vh = Math.max(
+      document.documentElement.clientHeight || 0,
+      window.innerHeight || 0
+    );
+
+    const vh50 = vh * 0.5;
+
+    const offset = scrollPercent * -vh50;
+
+    wrapper?.style.setProperty("--gradient-top-offset", `${offset}px`);
+  });
+}