docs(site): drive the scroll effects from script and drop the trailing slash from links

CSS scroll-driven animations made touch scrolling drop frames in Android
WebView on a 120 Hz phone, so the progress bar and the preview tilt now
follow the scroll position from script. The release pulse animates a
transform instead of `left` and `right`, which ran layout on every frame.

GitHub Pages redirects the slashless project URL, so the links still resolve.

README.md

@@ -13,7 +13,7 @@ A multi-platform proxy client based on ClashMeta. Simple to use, open source and
 [![License](https://img.shields.io/github/license/chen08209/FlClash?style=flat-square)](LICENSE)
 [![Telegram](https://img.shields.io/badge/Telegram-channel-26A5E4?style=flat-square&logo=telegram&logoColor=white)](https://t.me/FlClash)
 
-[Website](https://chen08209.github.io/FlClash/) · [Download](#download) · [Changelog](CHANGELOG.md) · [Build from source](#build-from-source)
+[Website](https://chen08209.github.io/FlClash) · [Download](#download) · [Changelog](CHANGELOG.md) · [Build from source](#build-from-source)
 
 </div>
 
@@ -40,7 +40,7 @@ A multi-platform proxy client based on ClashMeta. Simple to use, open source and
 ## Download
 
 Get the latest build from [GitHub Releases](https://github.com/chen08209/FlClash/releases/latest), or open the
-[website](https://chen08209.github.io/FlClash/#download), which picks the right file for your device.
+[website](https://chen08209.github.io/FlClash#download), which picks the right file for your device.
 
 | Platform | Packages | Notes |
 | --- | --- | --- |

README_zh_CN.md

@@ -13,7 +13,7 @@
 [![License](https://img.shields.io/github/license/chen08209/FlClash?style=flat-square)](LICENSE)
 [![Telegram](https://img.shields.io/badge/Telegram-channel-26A5E4?style=flat-square&logo=telegram&logoColor=white)](https://t.me/FlClash)
 
-[官网](https://chen08209.github.io/FlClash/zh/) · [下载](#下载) · [更新日志](CHANGELOG.md) · [从源码构建](#从源码构建)
+[官网](https://chen08209.github.io/FlClash/zh) · [下载](#下载) · [更新日志](CHANGELOG.md) · [从源码构建](#从源码构建)
 
 </div>
 
@@ -38,7 +38,7 @@
 ## 下载
 
 从 [GitHub Releases](https://github.com/chen08209/FlClash/releases/latest) 获取最新版本，或打开
-[官网](https://chen08209.github.io/FlClash/zh/#download)，它会自动为你的设备选好安装包。
+[官网](https://chen08209.github.io/FlClash/zh#download)，它会自动为你的设备选好安装包。
 
 | 平台 | 安装包 | 说明 |
 | --- | --- | --- |

site/assets/app.js

@@ -913,6 +913,24 @@
     matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => field?.refresh());
   }
 
+  // Scroll-driven CSS animations stutter in Android WebView at 120 Hz, so the page progress bar and the preview
+  // settling flat follow the scroll position from script instead.
+  function followScroll() {
+    if (reducedMotion.matches) return;
+    const range = root.scrollHeight - innerHeight;
+    const read = range > 0 ? Math.min(1, Math.max(0, scrollY / range)) : 0;
+    $('.nav-progress').style.transform = `scaleX(${read.toFixed(4)})`;
+
+    const shot = $('.shot');
+    let top = 0;
+    for (let node = shot; node; node = node.offsetParent) top += node.offsetTop;
+    const inset = parseFloat(getComputedStyle(root).scrollPaddingTop) || 0;
+    const travel = (innerHeight - inset + shot.offsetHeight) * 0.42;
+    const flat = Math.min(1, Math.max(0, (scrollY - top + innerHeight) / travel));
+    shot.style.transform =
+      flat < 1 ? `rotateX(${(18 * (1 - flat)).toFixed(2)}deg) scale(${(0.93 + 0.07 * flat).toFixed(4)})` : '';
+  }
+
   function wireEvents() {
     wireTabs($('#platform-seg'), (value) => setPlatform(value));
     wireTabs($('#arch-seg'), (value) => setArch(value));
@@ -966,9 +984,13 @@
     addEventListener('hashchange', revealHash);
 
     const nav = $('#nav');
-    const onScroll = () => nav.classList.toggle('scrolled', scrollY > 4);
+    const onScroll = () => {
+      nav.classList.toggle('scrolled', scrollY > 4);
+      followScroll();
+    };
     addEventListener('scroll', onScroll, { passive: true });
     onScroll();
+    if ('ResizeObserver' in window) new ResizeObserver(followScroll).observe(document.body);
 
     let resizeFrame = 0;
     addEventListener('resize', () => {
@@ -977,6 +999,7 @@
         moveInk($('#platform-seg'), false);
         moveInk($('#arch-seg'), false);
         reel.refit();
+        followScroll();
       });
     });
   }

site/assets/style.css

@@ -444,6 +444,8 @@ button {
   position: relative;
   width: 16px;
   height: 6px;
+  border-radius: 99px;
+  overflow: hidden;
 }
 
 .pulse::after {
@@ -452,9 +454,10 @@ button {
   top: 0;
   bottom: 0;
   left: 0;
-  right: 10px;
+  right: 0;
   border-radius: 99px;
   background: var(--accent);
+  transform: translateX(-10px);
 }
 
 .hero-grid {
@@ -1771,19 +1774,6 @@ mark {
   .release.shown .mark {
     animation: mark-in 0.7s var(--spring-pop) 0.2s backwards;
   }
-
-  @supports (animation-timeline: view()) {
-    .nav-progress {
-      animation: progress linear both;
-      animation-timeline: scroll(root block);
-    }
-
-    .shot {
-      animation: flatten linear both;
-      animation-timeline: view();
-      animation-range: entry 0% cover 42%;
-    }
-  }
 }
 
 @keyframes rise {
@@ -1813,33 +1803,18 @@ mark {
   }
 }
 
-@keyframes flatten {
-  from {
-    transform: rotateX(18deg) scale(0.93);
-  }
-}
-
-@keyframes progress {
-  to {
-    transform: scaleX(1);
-  }
-}
-
 @keyframes inch {
   0%,
   14% {
-    left: 0;
-    right: 10px;
+    transform: translateX(-10px);
   }
   40%,
   60% {
-    left: 0;
-    right: 0;
+    transform: none;
   }
   86%,
   100% {
-    left: 10px;
-    right: 0;
+    transform: translateX(10px);
   }
 }
 

tool/build_site.sh

@@ -42,6 +42,6 @@ else
   cp "$root/CHANGELOG.md" "$out/CHANGELOG.md"
 fi
 
-node "$root/tool/render_site.mjs" "$out" "${SITE_URL:-https://chen08209.github.io/FlClash/}"
+node "$root/tool/render_site.mjs" "$out" "${SITE_URL:-https://chen08209.github.io/FlClash}"
 
 echo "site assembled in $out"