Showcase
前台元件與動畫範例
16 種可直接用在官網的動態區塊，每一個都標示用途與做法。滑鼠移上去試試。
Motion library
每個區塊都有自己的動態設計
原則只有三條：一個區塊一種動作、琥珀色只給最重要的元素、尊重「減少動態」設定的使用者。
01極光動態背景
做法：純 CSS首頁第一屏或 CTA 區的底層，讓整塊慢慢流動，不搶文字。
Aurora穩・才能快。
02滑鼠跟隨點陣
做法：CSS＋少量 JS滑鼠移到哪，點陣就亮到哪。適合科技感的「關於我們」或「技術」區塊。
把滑鼠移過來
03閃電紋理背景
做法：純 CSS品牌閃電做成的底紋，持續斜向流動。適合橫幅、分隔帶、頁尾上方。
SOLID SPEED
04Bento 格狀版面
做法：CSS Grid把服務或特色放進大小不一的格子，資訊密度高又不雜亂。滑過會放大。
網站架設01
SEO02
主機維運03
電商購物網站04
設計05
改版06
05合作工具跑馬燈
做法：純 CSS放客戶 LOGO 或合作工具，兩側淡出。無限循環。
WordPressWooCommerceCloudflareRank MathGoogle AnalyticsLINE Pay綠界 ECPay藍新金流統一金流
063D 傾斜卡片
做法：CSS＋少量 JS卡片跟著滑鼠傾斜，內容微微浮起。用在方案卡、作品卡。
Pro plan精品方案NT$ 45,000起
客製首頁＋10 內頁、SEO 打底、一年保固。
07打字效果標題
做法：CSS＋少量 JS首頁標題輪流打出不同關鍵字，強調多種服務。
我們做
08逐字揭露標題
做法：純 CSS大標從下方逐字升起，進場有節奏。
精品等級，以週上線。
09流動漸層字
做法：純 CSS琥珀光在字上流過。只用在一個最重要的標題，不要滿版用。
PANSWIFT
10流程節點
做法：純 CSS流程、公司沿革、專案進度。節點依序彈出。
第 1 週 需求訪談確認頁面與時程
第 2 週 設計提案首頁設計稿確認
第 3 週 架設測試測試網址預覽
第 4 週 上線教學交付帳號與備份
11重點訊息輪播
做法：純 CSS三則重點訊息自動輪播，每則停 4 秒。也可以放客戶見證。
形象官網 2–4 週上線，每週五回報進度。磐迅的承諾 01
網站、帳號、備份與原始檔全部交給你。磐迅的承諾 02
上線後一年保固，主機與維運一起顧。磐迅的承諾 03
12統計環與數字
做法：SVG＋CSS完成率、滿意度、速度分數這類百分比。圖中為範例數值。
96%
行動版速度100%
完成度92%
轉換率14價格切換
做法：CSS＋少量 JS方案切換時數字平滑跳動。
NT$ 45,000
起，依需求報價
15手機畫面自動捲動
做法：純 CSS展示手機版體驗，畫面會自己往下捲再回來。
磐迅科技
16載入與骨架動畫
做法：純 CSS等待時的轉圈、跳點、進度條與骨架閃光，讓「等待」也有品牌感。
How to use
在 WordPress 裡怎麼放
純 CSS 的效果
極光、閃電紋理、流動字、光束按鈕、骨架：樣式放進全站樣式表，在區塊加上對應的 class 即可。
需要幾行 JS 的效果
3D 傾斜、滑鼠點陣、打字、價格切換：全站載入一次程式碼，任何頁面都能直接使用。
不拖慢網站
動畫只用 CSS 與原生 JavaScript，不依賴大型套件；裝置設定「減少動態」時自動停用。
Free consultation
想把這些效果用在你的網站？
告訴我們你的品牌與需求，我們幫你挑最適合的動態設計。
服務時間：週一至週五 10:00–18:00