標籤: 動態效果 頁1

網路資源

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 動畫的套件。

網路資源

PixiJS- 功能極為強大的 2D WebGL 繪圖引擎

PixiJS 是一個功能極為強大的 2D WebGL 繪圖引擎,可以用來製作多種動態效果以及動畫。

網路資源

Tilt.js- 卡片 3D 互動效果

Tilt.js 是一個可以製作卡片 3D 互動效果的套件。

網路資源

GSAP- 功能強大且方便的網頁動態函式庫

GSAP 是一個功能強大且方便使用的網頁動態效果函式庫,只要簡單套用他的 api 就能完成很多很棒的效果。

網路資源

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

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

網路資源

StarScroll.js- 可做出星空般視差滾動效果的套件

StarScroll.js 是可做出星空般視差滾動效果的套件。

網路資源

Stellar.js- 視差滾動的套件

Stellar.js 是一個可以製作視差滾動的套件。