spark-store-project/spark-store-abyss
15
0
Fork 0
mirror of https://github.com/spark-store-project/spark-store-abyss synced 2025-12-17 21:01:38 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: improve opacity and transform effects based on scroll progress

Browse Source
This commit is contained in:
jiwangyihao
2025-05-30 01:06:23 +08:00
parent 901a80d9a0
commit 44ce997d03
1 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
pages/index.vue
View File

@@ -19,10 +19,10 @@ onMounted(() => {
<div <div
class="fixed w-full h-full top-0 left-0 z-[-1] flex items-end justify-center" class="fixed w-full h-full top-0 left-0 z-[-1] flex items-end justify-center"
:style="{ :style="{
opacity: Math.max(0, (1 - sProgress * 2) * 1), opacity: 1 - range(0, 0.5, sProgress) * 2,
'--s-size': 5.5, '--s-size': 5.5,
'--s-n': 16, '--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"> <div class="absolute top-0 left-0 flex flex-col">
@@ -56,7 +56,9 @@ onMounted(() => {
<div <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]" 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="{ :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> <p>了解更多</p>