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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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