Web Design Atlas / 網頁設計的用語與視覺

請實作以下效果。 視差 / Parallax. 前景與背景以不同速度移動。 呈現裝飾圖像的深度. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 捲動縮放 / Scroll zoom. 隨捲動放大圖像。 引導注意圖像細節. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 影像序列 / Image sequence. 隨捲動切換依序排列的影格。 呈現分階段的形狀變化. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 淡入 / Fade-in. 從透明逐漸顯現。 柔和地呈現元素. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 滑入 / Slide-in. 從偏移的位置移入畫面。 呈現元素進入的方向. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 交錯動畫 / Stagger. 以時間差顯示多個元素。 呈現項目順序. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 文字揭示 / Text reveal. 讓文字從下方向上顯現。 呈現短標題. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 遮罩揭示 / Mask reveal. 擴大可見區域以顯示內容。 呈現圖像或照片. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 模糊淡入 / Blur-in. 從模糊變成清晰。 加入短暫登場效果. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 打字機效果 / Typewriter. 逐字顯示文字。 依序呈現短訊息. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 數字遞增 / Count-up. 數字增加至目標值。 強調數值結果. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 捲動連動 / Scroll-linked animation. 隨捲動進度改變顯示。 用進度條顯示閱讀位置. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 黏附定位 / Sticky. 元素在容器內維持相同位置。 閱讀說明時保留圖像. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 捲動吸附 / Scroll snap. 捲動後對齊區塊位置。 逐張比較卡片. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 SVG線條描繪 / SVG line draw. 從起點逐步畫出線條。 呈現路徑或連結. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 跑馬燈 / Marquee. 文字沿水平方向移動。 重複短裝飾詞句. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 縮放進場 / Scale-in. 元素由小放大並出現。 呈現卡片進場. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 旋轉進場 / Rotate-in. 傾斜元素旋轉並出現。 呈現小型裝飾進場. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 3D翻轉 / 3D flip. 卡片沿軸立體旋轉。 呈現面向的變化. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 圓形揭露 / Circular reveal. 擴大圓形範圍以顯示內容。 由中心顯示圖片. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 文字填色 / Text fill. 依序為字形內部填色。 呈現短標題的進度. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 路徑運動 / Motion path. 元素沿指定路徑移動。 呈現路線或流程. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 形狀變形 / Shape morphing. 移動頂點以改變圖形。 呈現兩種形狀的對應. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 色彩轉換 / Color transition. 背景逐漸由一種顏色變成另一種。 呈現區段切換. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 懸停浮起 / Hover lift. 指向或聚焦時元素浮起。 標示可操作的位置. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 焦點框 / Focus ring. 以外框標示目前聚焦的控制項。 呈現鍵盤操作的位置. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 手風琴 / Accordion. 操作標題以展開或收合內容。 按需閱讀補充資訊. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 分頁 / Tabs. 切換至所選標題對應的內容。 在同一位置切換資訊. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 網格 / Grid. 依照行列整齊排列項目。 比較同類項目. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 便當式網格 / Bento grid. 組合大小不同的區塊。 依功能分配空間. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 分割畫面 / Split screen. 將畫面分成兩個區域。 對照說明與圖像. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 非對稱版面 / Asymmetric layout. 讓左右的寬度與位置不同。 強調主要元素. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 留白 / Whitespace. 保留元素周圍的空間。 區分資訊群組. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 編輯式版面 / Editorial layout. 組合大標題與分欄。 引導閱讀順序. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 瀑布流版面 / Masonry layout. 垂直堆疊不同高度的項目。 比較圖片列表. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 重疊版面 / Overlapping layout. 以重疊的層次配置元素。 呈現主要與輔助資訊的關係. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 滿版配置 / Full-bleed layout. 將圖片或背景延伸至區域邊緣。 強調圖片的印象. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 卡片版面 / Card layout. 將相關資訊分組放入卡片。 清楚顯示項目的範圍. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 玻璃擬態 / Glassmorphism. 透過半透明面板看見模糊背景。 疊加輔助面板. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 新擬物化 / Neumorphism. 以明暗陰影呈現凹凸。 為裝飾面板增加柔和立體感. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 新粗獷主義 / Neo-brutalism. 使用粗輪廓與偏移陰影。 建立明確的視覺分界. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 漸層 / Gradient. 讓顏色連續變化。 為背景或重點增加色彩變化. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 雙色調 / Duotone. 將明暗區域轉成兩種顏色。 統一圖像色調. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 輪廓文字 / Outline typography. 只描繪文字的輪廓。 製作短裝飾標題. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 柔和陰影 / Soft shadow. 用模糊陰影呈現高度。 區分可操作的表面. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 顆粒紋理 / Grain texture. 以細小顆粒增加表面質感。 減少背景的單調感. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 網格漸層 / Mesh gradient. 在表面上柔和混合多種顏色。 呈現延展的色彩背景. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。

請實作以下效果。 網點 / Halftone. 以點的排列呈現濃淡。 營造印刷質感. 請指定對象與觸發條件。捲動連動效果應依元素在頁面中的位置與捲動距離變化，向上捲動時倒回。保持主要文字可讀，支援320px畫面與鍵盤。減少動態時顯示完成的靜態畫面。