WebberUI / 元件總覽

動畫與互動元件,
依用途整理。

依名稱或用途搜尋,看過即時預覽後複製安裝指令。免費元件不需要登入。

閱讀安裝說明

同一段距離,三種緩動曲線。

cubic-bezier(.22,1,.36,1)
依用途挑選

找到 533 個元件,目前顯示前 24 個

頁面區塊 Sections

48

3 款動畫 Hero(漸層/粒子/分割文字)

查看用法與安裝

3 款進階 Hero(WebGL/3D/影片遮罩)

查看用法與安裝

3 款特色區塊(bento/滾動對照/卡片)

查看用法與安裝

行動呼籲區 + 2 款動畫 Footer

查看用法與安裝

登入/註冊頁組(含表單動效)

查看用法與安裝

完整定價區塊(含 FAQ 手風琴)

查看用法與安裝

團隊展示 + 客戶 logo 跑馬牆

查看用法與安裝

完整社會證明區塊

查看用法與安裝

含表單與微互動的聯絡我們區塊

查看用法與安裝

團隊成員卡網格:漸層頭像、hover 翻出社群連結

查看用法與安裝

訂閱表單區塊:輸入動畫、送出成功變身與社會證明

查看用法與安裝

標題在左、右側一面 3D 傾斜排列的圖片畫廊緩慢橫移,兩列反向,hover 時暫停。

查看用法與安裝

標題下方一條浮起的聯絡列:電子郵件一鍵複製、電話撥號與預約按鈕,捲出首屏後可吸附在視窗底部。

查看用法與安裝

暗色主視覺,標題下方三個關鍵數字進入視口時依序計數,分隔線同步描出。

查看用法與安裝

置中標題背後散落一群合作夥伴符號緩慢漂移,各自不同速度與方向,游標移動時產生輕微視差。

查看用法與安裝

標題下方一條帶齒孔的膠片帶無限橫捲,捲動頁面越快膠片跑得越快,hover 單格放大。

查看用法與安裝

標題在左、右側圖磚網格自中心向外依序進場,hover 單塊放大、其他圖磚微暗。

查看用法與安裝

層疊的墨色山脊曲線由程式產生並逐層描繪,標題文字先描邊再填色,捲動時山脊分層視差。

查看用法與安裝

整合服務圖示網格環繞中央產品圖示,光束沿連線依序流向中心,hover 某個服務時點亮它的那條連線。

查看用法與安裝

極簡置中主視覺:標題逐字模糊淡入上浮,唯一的行動按鈕帶緩慢呼吸光環,其餘保持安靜。

查看用法與安裝

互動粒子場背景上的主視覺:粒子緩慢漂移並在鄰近時連線,游標靠近會推開粒子,標題清楚浮在上方。

查看用法與安裝

右側一個大型瀏覽器裝置框佔滿版面,隨頁面捲動從微傾角度轉正並放大,框內可放任意產品畫面。

查看用法與安裝

由捲動驅動的分段城市天際線:往下捲時天色由黃昏轉入夜,建築一段段點亮窗燈,標題隨段落切換。

查看用法與安裝

暗色科技格線主視覺:格點與連線受游標磁力牽引彎曲,點擊時從落點擴散出一圈漣漪波。

查看用法與安裝
依分類瀏覽