From 44ce997d036f482b1e004efa6de79f9ec9a76bee Mon Sep 17 00:00:00 2001
From: jiwangyihao <jwyh@jwyihao.top>
Date: Fri, 30 May 2025 01:06:23 +0800
Subject: [PATCH] fix: improve opacity and transform effects based on scroll
 progress

---
 pages/index.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index 49ddd4a..c1f11f7 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -19,10 +19,10 @@ onMounted(() => {
       <div
         class="fixed w-full h-full top-0 left-0 z-[-1] flex items-end justify-center"
         :style="{
-          opacity: Math.max(0, (1 - sProgress * 2) * 1),
+          opacity: 1 - range(0, 0.5, sProgress) * 2,
           '--s-size': 5.5,
           '--s-n': 16,
-          '--s-progress': Math.min(1, sProgress * 2),
+          '--s-progress': range(0, 0.5, sProgress) * 2,
         }"
       >
         <div class="absolute top-0 left-0 flex flex-col">
@@ -56,7 +56,9 @@ onMounted(() => {
         <div
           class="flex flex-col items-center justify-center mb-10 text-(--p-secondary-400) text-lg gap-2 tracking-[0.5em] transition-all duration-[.03s]"
           :style="{
-            transform: `translateY(${Math.min(0, sProgress * -500)}%)`,
+            transform: `translateY(${range(0, 0.5, sProgress) * -500}%) scale(${
+              1 + range(0, 0.5, sProgress) * 0.2
+            })`,
           }"
         >
           <p>了解更多</p>