Day 09 - Animate UI Scroll Progress

前言

#

今天要來介紹 Scroll Progress，在長篇內容或多段落的頁面中你常常會看到它的存在，目的是讓使用者知道自己目前閱讀的位置。它能夠根據捲動進度，動態顯示使用者在頁面中的位置。這樣的設計不僅提升閱讀體驗，也能為整體介面增添互動感。接下來就一步一步來跟著我製作唄～

Scroll Progress

#

▲ 是否有注意到在網頁頂端有藍色進度條😱

1. 使用 Shadcn CLI 加入 Scroll Progress

   npx shadcn@latest add @animate-ui/primitives-animate-scroll-progress
   

2. Import 元件並將元件放在想要的位置上

   這邊分為 local 和 global。 Local 意思是監聽對象是元素本身（通常是某個 section 或 div），適合做「局部區塊動畫」。 Global 意思是整個頁面的全域滾動（像是瀏覽器 DOM window），適合做「全頁滾動進度動畫」，例如進度條。

   import {
       ScrollProgressProvider,
       ScrollProgress,
       ScrollProgressContainer,
       type ScrollProgressDirection,
   } from '@/components/animate-ui/primitives/animate/scroll-progress';
   
   // Local
   <ScrollProgressProvider>
       <ScrollProgress />
       <ScrollProgressContainer>Scrollable content</ScrollProgressContainer>
   </ScrollProgressProvider>
   
   // Global
   <ScrollProgressProvider global>
       <ScrollProgress />
   </ScrollProgressProvider>
   

   在開頭介紹的 Scroll Progress 是使用 Global 的方式進行滾動

3. 若還有想要微調，可以增加更多參數 (? 表示為選填參數)

   ScrollProgressProvider 可調整的部分：

   參數	參數型態	說明
   global?	boolean	是否使用全域的滾動。預設為 false
   transition?	object	動畫過渡設定，有三個參數（stiffness 剛度 : number, damping 阻尼 : number, bounce 彈性 : number）。預設為 { stiffness: 250, damping: 40, bounce: 0 }，若想要了解更詳細的參數，可以參考 [Day5 / Day6 Text Animation] 或是 Framer.Motion react-transitions
   direction?	'vertical' | 'horizontal'	指定滾動方向，vertical 表示垂直滾動，horizontal 表示水平滾動，預設為 vertical

   ScrollProgress 可調整的部分：

   參數	參數型態	說明
   mode?	'width' | 'height' | 'scaleX' | 'scaleY'	進度顯示模式：width 以寬度表示、height 以高度表示、scaleX 透過 X 軸縮放表示、scaleY 透過 Y 軸縮放表示。預設為 width
   asChild?	boolean	是否將元件作為子元素渲染，方便與其他組件結合，預設為 false

小結

#

今天主要練習如何在網頁上操作 Animate UI Scroll Progress，若覺得不過癮，需要有更多範例，可以至 Animate UI Scroll Progress 當中的設定滾動方向。

Reference

#

• Animate UI Docs