標籤: 動態效果 頁1

網路資源

starback.js- 漂亮的 js 流星背景套件

starback.js 是一個可以製作漂亮流星背景的 js 套件。

網路資源

bubbly-bg- 好看的 js 網頁動態泡泡背景效果

bubbly-bg 是一個可以快速製作漂亮的動態泡泡背景效果的套件。

網路資源

particles.js- 輕量且好用的 js 粒子互動背景套件

particles.js- 輕量且好用的 js 粒子背景套件

網路資源

iconscout- 豐富的 icon、動畫、插畫以及 3D 素材資源分享網站

iconscout 是一個有著豐富的 icon、動畫、插畫以及 3D 素材資源分享網站。

網路資源

Animate On Scroll Library (AOS)- 依據捲動位置製作移入移出效果的套件

Animate On Scroll Library (AOS) 是一個可以根據捲動位置讓網頁上的區塊可以飛入或飛出的套件,用了這個套件可以讓使用者在瀏覽的時候有更生動的互動效果。

網路資源

Motion Array- 豐富的動畫效果資源庫,有免費以及付費供使用者下載使用

Motion Array 是一個集合了許多酷炫動畫效果的網站,包含使用 After Effect 或 Premiere 的,也有免費的音效可以下載,提供了免費及付費的不同原始檔,有需要的可以去看看有沒有想要的效果可以使用。

網路資源

SVGator- 好用的線上圖形化 SVG 動畫編輯工具

SVGator 是一個強大的線上 SVG 動畫編輯工具,可以在線上繪製 SVG 後匯出,也可以上傳已經畫好的 SVG 圖片後製作動畫,動畫都是圖形化介面很方便,可以不用寫 code 就能製作動畫。

網路資源

App Animations- 收錄許多手機 app 互動效果的網站

App Animations 是一個收錄許多手機 app 互動效果的網站,可以到這邊收集靈感。

網路資源

D3.js- 強大的資訊視覺化套件

D3.js 是一個強大的資訊視覺化套件,可以利用它來產生像是長條圖、折線圖或是透過 geoJson 產生跟地圖互動的圖表。

網路資源

Free Frontend- 收錄一些不錯的前端效果的網站

Free Frontend 會不定期收錄及整理一些不錯的前端效果,值得多來看看學會一些小技巧或吸取靈感。

網路資源

Gridster.js- 建立動態磚概念的格狀版面的套件

Gridster.js 是一個建立動態磚概念的格狀版面的套件,還支援手動拖曳及大小縮放。

網路資源

vivus.js- 處理 SVG stroke Animation 的套件

vivus.js 是一個處理 SVG stroke Animation 的套件,可以選擇用 delayer、sync 或 OneByOne 的方式來顯示線條動畫。

網路資源

anime.js- 功能強大的動畫工具

anime.js 是一個功能強大的動畫工具,可以和CSS3變數、SVG、DOM 之類的元素互動,製作出高效能且平滑的動畫效果。

網路資源

Konva.js- 威力強大的 canvas 繪圖函式庫

Konva.js 是一個威力強大的 canvas 繪圖函式庫,主要功能是讓你創建 Canvas 上的繪圖版、圖層、拖拉工具等。

網路資源

p5.js- 以 canvas 為本的 javascript 動畫函式庫

p5.js 是一個可以用來製作動畫及互動效果的 javascript 函式庫,又因為是以 canvas 為基礎,所以也可以完成一些很複雜的動態效果還不至於讓頁面感覺會頓頓的。

網路資源

A-Frame- 在網頁上實現 3D/AR/VR 的套件

A-Frame 是一個在網頁上實現 3D/AR/VR 的套件,並支援 Quest, Rift, WMR, SteamVR, mobile, desktop 的裝置。

網路資源

Three.js- 功能強大的 js 3D 引擎

Three.js 是功能強大的 js 3D 引擎,可以用來做 3D 特效,也可以把 3D 模型讀入後互動,是目前主流的 js 3D 函式庫。

網路資源

Lottie.js- 把 After Effect 的動畫轉成 HTML5 動畫的好用套件

Lottie.js 是由 Airbnb 開發出來的可以直接把 After Effect 的動畫轉成 HTML5 動畫的套件。